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

上善若水 · 发表于 2024-2-29 08:44:49

后端代码：

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>

复制代码

来源：https://blog.csdn.net/weixin_43553153/article/details/103301493
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

		自动登录	找回密码
密码			会员注册