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

后端代码:

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>

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值