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

pcdd

已于 2023-04-10 21:34:14 修改

阅读量7.2k

点赞数 1

分类专栏： .NET 文章标签： asp.net

于 2019-11-28 21:36:34 首次发布

本文链接：https://blog.csdn.net/weixin_43553153/article/details/103301493

版权

.NET 专栏收录该内容

4 篇文章 1 订阅

订阅专栏

后端代码：

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" />
    <!-- Bootstrap 3 核心 CSS 文件 -->
    <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>