Reading files too quickly in javascript?
<p>I have the following code:</p>

<pre><code>oFReader = new FileReader(), rFilter = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i;
oFReader.onload = function (oFREvent) {
    $("#preview").append("&lt;img src='" + oFREvent.target.result + "' /&gt;");
};

function loadImageFile() {
    if (document.getElementById("uploadImage").files.length === 0) { return; }

    $.each(document.getElementById("uploadImage").files, function (index, value) {
        if (!rFilter.test(value.type)) { alert("You must select a valid image file!"); return; }
        oFReader.readAsDataURL(value);
    });
}
</code></pre>

<p>It is intended to take a collection of images that have been dragged onto a input of type file, and then preview those images in a div.  My issue is that when I run this, only the last image appears.  If I add a break point into my javascript and step through the code, both images are displayed.</p>

<p>I am assuming that this is happening because <code>oFReader.onload</code> is being called twice very quickly.  I had considered using setTimeout or possibly declaring <code>oFReader</code> inside of my loop to try to avoid the conflict, but I'm wondering if there is a more elegant solution?</p>
