管理FileUpload控件上的编辑

Question

我有一个产品页面.我想将我的产品添加到我的数据库中,我也想更新我的产品.我的图像有问题.当我插入产品时,可以正常使用..在我的aspx页面中,我有以下代码:

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

当我保存我的产品时,在代码后面我有这个代码:

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)
    }
}

现在,问题是我可以编辑保存的产品.当我单击产品的编辑按钮时,我必须加载它的所有数据并让用户修改它们.还有图像.

主要问题是:如何在asp:FileUpload控件中加载保存的图像？

我想做的另一件事是在插入和编辑中显示图像预览...

我想做的一个例子就是亚马逊所做的事情

但是,如果只有一个FileUpload可以使用AllowMultiple = true

如果有必要,我愿意使用其他技术,如javascript,jquery和Ajax

Answer 1

显示图像预览 - 插入

<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);" />