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

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 for image上的字段转换为Template Field。您可以通过单击ASPX页面的源视图并替换ImageField或BoundField（无论您在显示图像时使用哪个字段）来执行此操作。

在问题上查看GridView的设计：

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

绑定图像源的方法是在那个问题的答案中。

要拥有删除或替换功能，您可以在显示图像的标记下方的TemplateField中包含一个LinkButton控件。

您可以在.vb或.cs文件中将LinkButton的CommandName属性设置为'Delete'或'Replace'，找到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

管理FileUpload控件上的编辑

3 个答案: