尝试在uloading时显示多个图像

时间:2017-12-04 06:11:37

标签: c# asp.net

我试图在屏幕上传时显示多个图像,但不知道如何做到这一点。 下面是我的代码,通过它我可以上传多个图像,并可以显示一个图像,但我想在屏幕上同时显示多个图像,同时点击" btnUpload"按钮。  的.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default4.aspx.cs" Inherits="Default4" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <asp:FileUpload ID="FileUpload1" runat="server" AllowMultiple="true" />
<asp:Button ID="btnUpload" Text="Upload" runat="server" OnClick ="UploadMultipleFiles" accept ="image/gif, image/jpeg" />
<hr />
<asp:Image ID="Image1" Visible = "false" runat="server" Height = "100" Width = "100" />
<asp:Label ID="lblSuccess" runat="server" ForeColor ="Green" />
    </div>
    </form>
</body>
</html>

C#代码

 protected void UploadMultipleFiles(object sender, EventArgs e)
    {
        foreach (HttpPostedFile postedFile in FileUpload1.PostedFiles)
        {
            string fileName = Path.GetFileName(postedFile.FileName);
            postedFile.SaveAs(Server.MapPath("~/Uploads/") + fileName);
        }
        System.IO.Stream fs = FileUpload1.PostedFile.InputStream;
        System.IO.BinaryReader br = new System.IO.BinaryReader(fs);
        Byte[] bytes = br.ReadBytes((Int32)fs.Length);
        string base64String = Convert.ToBase64String(bytes, 0, bytes.Length);
        Image1.ImageUrl = "data:image/png;base64," + base64String;
        Image1.Visible = true;
        lblSuccess.Text = string.Format("{0} files have been uploaded successfully.", FileUpload1.PostedFiles.Count);
    }

1 个答案:

答案 0 :(得分:0)

您可以使用Repeater显示多个图像控件

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default4.aspx.cs" Inherits="Default4" %>
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:FileUpload ID="FileUpload1" runat="server" AllowMultiple="true" />
            <asp:Button ID="btnUpload" Text="Upload" runat="server" OnClick="UploadMultipleFiles" accept="image/gif, image/jpeg" />
            <hr />
            <asp:Repeater ID="rptImages" ItemType="System.String" Visible="true" runat="server">
                <ItemTemplate>
                    <asp:Image runat="server" Height="100" Width="100" ImageUrl='<%#Item%>' />
                </ItemTemplate>
            </asp:Repeater>
            <asp:Label ID="lblSuccess" runat="server" ForeColor="Green" />
        </div>
    </form>
</body>
</html>

背后的代码

    protected void UploadMultipleFiles(object sender, EventArgs e)
    {
        var images = new List<string>();
        foreach (HttpPostedFile postedFile in FileUpload1.PostedFiles)
        {
            string fileName = Path.GetFileName(postedFile.FileName);
            postedFile.SaveAs(Server.MapPath("~/Uploads/") + fileName);

            var imageUrl = "data:image/png;base64," + GetBase64(postedFile.InputStream);
            images.Add(imageUrl);
        }

        rptImages.DataSource = images;
        rptImages.DataBind();
        lblSuccess.Text = string.Format("{0} files have been uploaded successfully.", FileUpload1.PostedFiles.Count);
    }

    private string GetBase64(System.IO.Stream fs)
    {
        System.IO.BinaryReader br = new System.IO.BinaryReader(fs);
        Byte[] bytes = br.ReadBytes((Int32)fs.Length);
        string base64String = Convert.ToBase64String(bytes, 0, bytes.Length);
        return base64String;
    }