管理FileUpload控件上的编辑

时间:2017-03-06 17:54:50

标签: c# asp.net ajax html5 file-upload

我有一个产品页面。我想将我的产品添加到我的数据库中,我也想更新我的产品。 我的图像有问题。 当我插入产品时,可以正常使用..在我的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控件中加载保存的图像?

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

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

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

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

3 个答案:

答案 0 :(得分:2)

显示图片预览 - 插入

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

答案 1 :(得分:1)

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

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

答案 2 :(得分:1)

用于从磁盘显示图像到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中包含一个LinkBut​​ton控件。

您可以在.vb或.cs文件中将LinkBut​​ton的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