Upload multiple images with preview that works on IE8
<p>I have the following code that allows me to select an image file and preview it, or delete it before processing the actual upload.</p>

<p>This is the HTML that I use:</p>

<pre><code>&lt;input type='file' onchange="readURL(this);"  /&gt;
&lt;br/&gt;
&lt;span id="previewPane"&gt;
    &lt;img class="img_prev" src="#" alt="your image" /&gt;
    &lt;span class="x"&gt;[X]&lt;/span&gt;
&lt;/span&gt;
</code></pre>

<p>And this is the javascript that I use:</p>

<pre><code>var blank="http://upload.wikimedia.org/wikipedia/commons/c/c0/Blank.gif";
function readURL(input) {

    if (input.files &amp;&amp; input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $('.img_prev')
            .attr('src', e.target.result)
            .height(200);
        };

        reader.readAsDataURL(input.files[0]);
    }
    else {
      var img = input.value;
        $('.img_prev').attr('src',img).height(200);
    }
    $(".x").show().css("margin-right","10px");
}

 function OnClientFileSelected(sender, args){
    var row = args.get_row();
    var fakeFileNameInput = sender._getChildFileNameInputField(row);
    var fakePathString = "fakepath";
    if (fakeFileNameInput.value.indexOf(fakePathString) != 0){
        var fakePathLength = fakePathString.length;
        fakeFileNameInput.value = fakeFileNameInput.value.replace(fakePathString,"[SelectionPath]");
    }
} 


$(document).ready(function() {
  $(".x").click(function() {
    $(".img_prev").attr("src",blank);
    $(".x").hide();  
  });
});
</code></pre>

<p>Here is an example in <a href="http://jsbin.com/uxopah/1/" rel="nofollow">JsBin</a><br>
This works OK even in IE8, but What I want is to be able to add multiple images and have the same functionality.<br>
I mean, to use a single input type="file" and have several images in the preview area which can be individually deleted (or not).<br>
Can anyone help me out with this?</p>
