管理 FileUpload 控件上的编辑

Posted 2023-03-05

【中文标题】管理 FileUpload 控件上的编辑

【英文标题】：Manage Edits on FileUpload Control

【发布时间】：2017-07-26 17:19:47

【问题描述】：

我有一个产品页面。我想将我的产品添加到我的数据库中，并且我还想更新我的产品。 我有图像问题。 当我插入产品时，一切正常。在我的 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

【问题讨论】：

您没有在 FileUpload 控件中加载图像。没有必要这样做。您可以加载图像并在编辑时显示它们。当用户保存更改时，您只需检查 FileUpload 中是否有文件。如果有覆盖它们。如果没有，您只需保留已有的。

@VDWWD：但我希望用户可以看到上传的图像并删除其中的一个或多个。我想让用户替换图像，看看他在做什么。

你可以使用GridView或Repeater吗？

@CurseStacker 如果你给我一个小例子，我可以尝试学习。我知道 GridViews 但不会管理图像...

你是保存在磁盘而不是数据库中的文件吗？

【参考方案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);" />

【参考方案2】：

这是一个非常基本的示例，说明如何在将图像发送到服务器后对其进行处理。在这个 sn-p 中，图像的文件名是固定的，但应该足以让您朝着正确的方向前进。

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

【讨论】：

这很好，但我需要一次上传更多图片。

这只是一个例子。您可以根据需要添加任意数量的控件。

【参考方案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 属性设置为“删除”或“替换”，然后在您的 .vb 或 .cs 文件中，为您的 GridView 找到“RowCommand”事件。

类似于（仅限伪代码）

Protected Sub GridView_RowCommand(ByVal sender As Object, ByVal e As System.GridViewCommandEventArgs) Handles GridView.RowCommand
    If e.CommandName = 'Delete' Then
        'Place your delete query for your image record on the database here..
        'Place your delete file from disk code here..
    End If
End Sub

有关 GridView RowCommand 事件的更多信息

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