File Upload with Image Preview and Delete
<p>Is anyone able to help me customize the following code so that the file upload supports multiple file uploads, with a delete button for each image? At the moment, the code only supports one single image upload with preview/delete button. I tried changing the line  to  (which enabled multiple uploads) but this still only showed one image in the preview, along with one delete button. </p>

<p>The file upload code: </p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta charset=utf-8 /&gt;
&lt;title&gt;Image preview&lt;/title&gt;
&lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"&gt;&lt;/script&gt;
&lt;script&gt;
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");
}
$(document).ready(function() {
  $("#x").click(function() {
    $("#img_prev").attr("src",blank);
    $("#x").hide();  
  });
});
&lt;/script&gt;
&lt;!--[if IE]&gt;
&lt;script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"&gt;&lt;/script&gt;
&lt;![endif]--&gt;
&lt;style&gt;
article, aside, figure, footer, header, hgroup,
menu, nav, section { display: block; }
#x { display:none; position:relative; z-index:200; float:right}
#previewPane { display: inline-block; }
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;section&gt;
&lt;input type='file' onchange="readURL(this);"/&gt;&lt;br/&gt;
&lt;span id="previewPane"&gt;
&lt;img id="img_prev" src="" alt="" /&gt;
&lt;span id="x"&gt;[X]&lt;/span&gt;
&lt;/span&gt;
&lt;/section&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>