在FileUpload控件上管理编辑

Question

我有一个产品页面。我想将我的产品添加到我的数据库中，我也想更新我的产品。 我遇到图像问题。 当我插入产品everithing是确定的。在我的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控件中加载保存的图像？

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

什么，我想要做的一个例子是东西，亚马逊并

但是，如果可能的话，只有一个用的AllowMultiple的FileUpload =真

我愿意使用其他技术如JavaScript ，jQuery和阿贾克斯，如果有必要

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

Answer 2

下面是一个非常基本的示例，说明如何在图像发送到服务器后处理图像。在这段代码中，图像的文件名是固定的，但它应该足以让您向正确的方向推进。

protected void Page_Load(object sender, EventArgs e) 
{ 
    //check if the file exists and show 
    if (File.Exists(Server.MapPath("testImage.jpg"))) 
    { 
     setImage("/testImage.jpg"); 
    } 
} 

//upload a new image 
protected void Button1_Click(object sender, EventArgs e) 
{ 
    if (FileUpload1.HasFile) 
    { 
     try 
     { 
      FileUpload1.SaveAs(Server.MapPath("testImage.jpg")); 
      setImage("/testImage.jpg"); 
     } 
     catch 
     { 
      //error writing file 
     } 
    } 
} 

//delete the image 
protected void LinkButton1_Click(object sender, EventArgs e) 
{ 
    try 
    { 
     File.Delete(Server.MapPath("testImage.jpg")); 
     LinkButton1.Visible = false; 
     Image1.Visible = false; 
    } 
    catch 
    { 
     //error deleteing file 
    } 
} 

//set the image and show the delete link 
private void setImage(string image) 
{ 
    Image1.ImageUrl = "/testImage.jpg"; 
    Image1.Visible = true; 
    LinkButton1.Visible = true; 
} 

ASPX

<asp:Image ID="Image1" runat="server" Visible="false" /> 
<br /> 
<asp:LinkButton ID="LinkButton1" runat="server" Visible="false" OnClick="LinkButton1_Click">Delete image</asp:LinkButton> 
<br /> 
<br /> 
<asp:FileUpload ID="FileUpload1" runat="server" /> 
<br /> 
<asp:Button ID="Button1" runat="server" Text="Upload" OnClick="Button1_Click" /> 

Answer 3

对于从磁盘显示图像的GridView

https://www.aspsnippets.com/Articles/Display-Images-in-GridView-Control-using-the-path-stored-in-SQL-Server-database.aspx

现在你已经显示的图像，你希望有一些更换或上的图像删除功能。您需要将GridView上图像的字段转换为模板字段。您可以通过单击ASPX页面的源视图并替换您的ImageField或BoundField（您在显示图像时使用的任何字段）来执行此操作。

见GridView控件的设计上的问题：

How to display image inside gridview template field without using handler class?

的方式绑定的图像源是在这一问题的答案。

要具有删除或替换功能，可以在显示图像的标记下方的TemplateField中包含LinkBut​​ton控件。

您可以将LinkBut​​ton的CommandName属性设置为'Delete'或'Replace'，然后在您的.vb或.cs文件中找到GridView的'RowCommand'事件。

它去像在GridView的RowCommand事件

https://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.gridview.rowcommand(v=vs.110).aspx