Manage Edits on FileUpload Control

Question

I have a product page. I want to add my product to my database and I want also to update my product. I have a problem with images. When I insert the product everithing is ok.. In my aspx page I have this code:

<span>
  <asp:FileUpload ID="files" runat="server" AllowMultiple="true" />
</span>
<div runat="server" id="previewImages"></div>

and when I save my product, in code behind I have this code:

string filenm = string.Empty;
HttpFileCollection fileCollection = Request.Files;
for (int i = 0; i < fileCollection.Count; i++)
{
    HttpPostedFile uploadfile = fileCollection[i];
    if (uploadfile.ContentLength > 0)
    {
       string filename = uploadfile.FileName;
       System.IO.Directory.CreateDirectory(Server.MapPath("immScarpe/" + txtStyle.Text));
       file.SaveAs(Server.MapPath("immScarpe/" + txtStyle.Text + "/") + fileName);
       //this is pseudo-code
       INSERT INTO PRODUCT_IMM (IdProduct, Path) VALUES (Id, "immScarpe/" + txtStyle.Text + "/" + fileName)
    }
}

Now, the problem is that I can EDIT the saved product. When I click the edit button for a product, I have to load all it's data and let the user modify them. Also the images.

the main question is: How can I load the saved images in asp:FileUpload control?

Another thing I would like to do is to show images previews...in insert and in edit.

An Example of what I want to do is the thing that amazon does

but, if it's possible with only one FileUpload with AllowMultiple = true

I am willing to use other technologies like javascript, jquery and Ajax if it's necessary

Answer 1

Show Images Preview - Insert

<script src="jquery-1.10.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        function ShowpImagePreview(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();
                reader.onload = function (e) {
                    $('#previewImage').attr('src', e.target.result);
                }
                reader.readAsDataURL(input.files[0]);
            }
        }
    </script>

    <asp:Image ID="previewImage" runat="server" />

    <asp:FileUpload ID="FileUpload1" runat="server" onchange="ShowpImagePreview(this);" />