ASP.NET使用FileUpLoad控件实现图片上传并显示

╰半橙微兮° 2021-06-22 15:36 369阅读 0赞

后端代码：

using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using System.IO;
    
    namespace ex
    { 
        public partial class WebForm1 : System.Web.UI.Page
        { 
           
            string fileName;  //图片名 
            string fileExt;   //图片扩展名
            string filePath;  //图片绝对路径
            string fileType;  //图片MIME类型
            double fileSize;  //图片大小（byte）
            string[] ext = new string[] {  ".png", ".jpg", ".gif" };
            
            protected void Page_Load(object sender, EventArgs e)
            { 
                Panel1.Visible = false;
            }
            
            //图片上传
            protected void Button1_Click(object sender, EventArgs e)
            { 
    
                if (FileUpload1.HasFile)
                { 
                    fileName = FileUpload1.FileName;
                    fileExt = Path.GetExtension(fileName);
                    fileSize = FileUpload1.PostedFile.ContentLength;
                    fileType = FileUpload1.PostedFile.ContentType;
                    
                    //此处根据自己的路径修改
                    filePath = "C:\Users\AD\source\repos\WebApplication8\WebApplication8\image\" + fileName;
                    if (fileExt == ext[0] || fileExt == ext[1] || fileExt == ext[2])
                    { 
                        try
                        { 
                            FileUpload1.SaveAs(Server.MapPath("./image/") + fileName);
                            if (File.Exists(filePath))
                            { 
                                Image1.ImageUrl = @"./image/" + fileName;
                                Response.Write("<script>alert('上传成功！');</script>");
                            }
                            else
                                Response.Write("<script>alert('图片上传成功，但图片不存在或已被删除！');</script>");
                        }
                        catch (Exception)
                        { 
                            throw;
                        }
                        finally
                        { 
                            Panel1.Visible = true;
                            Label1.Text = filePath;
                            Label2.Text = fileName;
                            Label3.Text = fileExt;
                            Label4.Text = Math.Round(fileSize / (1024 * 1024), 2).ToString() + "M";
                            Label5.Text = fileType;
                        }
                    }
                    else
                        Response.Write("<script>alert('请上传png、jpg、gif格式的图片！');</script>");
                }
                else
                    Response.Write("<script>alert('请选择要上传图片！');</script>");
            }
        }
    }

前端代码：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="index.aspx.cs" Inherits="ex.WebForm1" %>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
        <title>image_upload</title>
    </head>
    <body>
        <form id="form1" runat="server">
            <div align="center">
                <h1>图片上传</h1>
                <asp:Image ID="Image1" runat="server" Width="300px" Height="300px"/>
                <asp:FileUpload ID="FileUpload1" runat="server" CssClass="btn btn-info"/>
                <br />
                <asp:Button ID="Button1" runat="server" Text="上传图片" OnClick="Button1_Click" CssClass="btn btn-primary"/>
                <br /><br />
                <asp:Panel ID="Panel1" runat="server">
                    <table class="table table-hover table-condensed table-striped success" style="width:500px;">
                        <tr>
                            <td>图片路径</td>
                            <td>
                                <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label></td>
                        </tr>
                         <tr>
                            <td>图片名</td>
                            <td>
                                <asp:Label ID="Label2" runat="server" Text="Label"></asp:Label></td>
                        </tr>
                         <tr>
                            <td>扩展名</td>
                            <td>
                                <asp:Label ID="Label3" runat="server" Text="Label"></asp:Label></td>
                        </tr>
                         <tr>
                            <td>图片大小</td>
                            <td>
                                <asp:Label ID="Label4" runat="server" Text="Label"></asp:Label></td>
                        </tr>
                         <tr>
                            <td>图片类型</td>
                            <td>
                                <asp:Label ID="Label5" runat="server" Text="Label"></asp:Label></td>
                        </tr>
                    </table>
                </asp:Panel>
            </div>
        </form>
    </body>
    </html>