使用标准HTML来进行图片上传

最新推荐文章于 2025-06-06 11:13:40 发布
转载 最新推荐文章于 2025-06-06 11:13:40 发布 · 1.1k 阅读 · 0
文章标签：

#html #string #server #upload #asp #exception

本文介绍了ASP.NET中几种常见的文件上传方法，包括单文件上传、多文件上传及客户端和服务端的文件类型检查。通过示例代码展示了如何实现这些功能。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

<body>
    <form id="form1" runat="server">
    <div>
        <table>
            <tr>
                <td colspan="2" style="height: 21px" >
                    使用标准HTML来进行图片上传</td>
            </tr>
            <tr>
                <td style="width: 400px">
                    <input id="InputFile" style="width: 399px" type="file" runat="server" /></td>
                <td style="width: 80px">
                    <asp:Button ID="UploadButton" runat="server" Text="上传图片" OnClick="UploadButton_Click" /></td>
            </tr>
            <tr>
                <td colspan="2" >
                    <asp:Label ID="Lb_Info" runat="server" ForeColor="Red"></asp:Label></td>                
            </tr>
        </table>    
    </div>
    </form>
</body>


后台代码：

<!--

Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

-->using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

public partial class _Default : System.Web.UI.Page 
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }
    protected void UploadButton_Click(object sender, EventArgs e)
    {
        string uploadName = InputFile.Value;//获取待上传图片的完整路径，包括文件名
        //string uploadName = InputFile.PostedFile.FileName;
        string pictureName = "";//上传后的图片名，以当前时间为文件名，确保文件名没有重复
        if (InputFile.Value != "")
        {
            int idx = uploadName.LastIndexOf(".");
            string suffix = uploadName.Substring(idx);//获得上传的图片的后缀名
            pictureName = DateTime.Now.Ticks.ToString() + suffix;
        }
        try
        {
            if (uploadName != "")
            {
                string path = Server.MapPath("~/images/");
                InputFile.PostedFile.SaveAs(path + pictureName);
            }
        }
        catch (Exception ex)
        {
            Response.Write(ex);
        }
    }
}


2 单文件上传

        这是最基本的文件上传，在asp.net1.x中没有这个FileUpload控件，只有html的上传控件，那时候要把html控件转化为服务器控件，很不好用。其实所有文件上传的美丽效果都是从这个FileUpload控件衍生，第一个例子虽然简单却是根本。

前台代码：

<!--

Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

--><body>
    <form id="form1" runat="server">
    <div>
        <table style="width: 90%">
            <tr>
                <td style="width: 159px" colspan=2>
                    <strong><span style="font-size: 10pt">最简单的单文件上传</span></strong></td>
            </tr>
            <tr>
                <td style="width: 600px">
                    <asp:FileUpload ID="FileUpload1" runat="server" Width="600px" /></td>
                <td align=left>
                    <asp:Button ID="FileUpload_Button" runat="server" Text="上传图片" OnClick="FileUpload_Button_Click" /></td>
            </tr>
            <tr>
                <td colspan=2>
                    <asp:Label ID="Upload_info" runat="server" ForeColor="Red" Width="767px"></asp:Label></td>
            </tr>
        </table>    
    </div>
    </form>
</body>

后台代码：

<!--

Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

-->using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

public partial class _Default : System.Web.UI.Page 
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }
    protected void FileUpload_Button_Click(object sender, EventArgs e)
    {
        try
        {
            if (FileUpload1.PostedFile.FileName == "")
            //if (FileUpload1.FileName == "")
            //if (!FileUpload1.HasFile)     //获取一个值，该值指示 System.Web.UI.WebControls.FileUpload 控件是否包含文件。包含文件，则为 true；否则为 false。
            {
                this.Upload_info.Text = "请选择上传文件！";
            }
            else
            {
                string filepath = FileUpload1.PostedFile.FileName;  //得到的是文件的完整路径,包括文件名，如：C:\Documents and Settings\Administrator\My Documents\My Pictures\20022775_m.jpg
                //string filepath = FileUpload1.FileName;               //得到上传的文件名20022775_m.jpg
                string filename = filepath.Substring(filepath.LastIndexOf("\\") + 1);//20022775_m.jpg
                string serverpath = Server.MapPath("~/images/") + filename;//取得文件在服务器上保存的位置C:\Inetpub\wwwroot\WebSite1\images\20022775_m.jpg
                FileUpload1.PostedFile.SaveAs(serverpath);//将上传的文件另存为
                this.Upload_info.Text = "上传成功！";
            }
        }
        catch (Exception ex)
        {
            this.Upload_info.Text = "上传发生错误！原因是：" + ex.ToString();
        }
    }
}




3 多文件上传

前台代码：

<!--

Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

--><body>
    <form id="form1" runat="server">
    <div>
    <table style="width: 343px">
            <tr>
                <td style="width: 100px">
                    多文件上传</td>
                <td style="width: 100px">
                </td>
            </tr>
            <tr>
                <td style="width: 100px">
                    <asp:FileUpload ID="FileUpload1" runat="server" Width="475px" />
                    </td>
                <td style="width: 100px">
                    </td>
            </tr>
            <tr>
                <td style="width: 100px">
                    <asp:FileUpload ID="FileUpload2" runat="server" Width="475px" /></td>
                <td style="width: 100px">
                </td>
            </tr>
            <tr>
                <td style="width: 100px">
                    <asp:FileUpload ID="FileUpload3" runat="server" Width="475px" /></td>
                <td style="width: 100px">
                </td>
            </tr>
            <tr>
                <td style="width: 100px">
                    <asp:Button ID="bt_upload" runat="server" OnClick="bt_upload_Click" Text="一起上传" />
                    <asp:Label ID="lb_info" runat="server" ForeColor="Red" Width="448px"></asp:Label></td>
                <td style="width: 100px">
                </td>
            </tr>
        </table>
    </div>
    </form>
</body>

后台代码：

<!--

Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

-->using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

public partial class _Default : System.Web.UI.Page 
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }
    protected void bt_upload_Click(object sender, EventArgs e)
    {
        if (FileUpload1.PostedFile.FileName == "" && FileUpload2.PostedFile.FileName == "" && FileUpload3.PostedFile.FileName == "")
        {
            this.lb_info.Text = "请选择文件！";
        }
        else
        {
            HttpFileCollection myfiles = Request.Files;
            for (int i = 0; i < myfiles.Count; i++)
            {
                HttpPostedFile mypost = myfiles[i];
                try
                {
                    if (mypost.ContentLength > 0)
                    {
                        string filepath = mypost.FileName;//C:\Documents and Settings\Administrator\My Documents\My Pictures\20022775_m.jpg
                        string filename = filepath.Substring(filepath.LastIndexOf("\\") + 1);//20022775_m.jpg
                        string serverpath = Server.MapPath("~/images/") + filename;//C:\Inetpub\wwwroot\WebSite2\images\20022775_m.jpg
                        mypost.SaveAs(serverpath);
                        this.lb_info.Text = "上传成功！";
                    }
                }
                catch (Exception ex)
                {
                    this.lb_info.Text = "上传发生错误！原因：" + ex.Message.ToString();
                }
            }
        }
    }
}


 

4 客户端检查上传文件类型(以上传图片为例)

<!--

Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>客户端检查上传文件类型</title>
    <script language="javascript">
    function Check_FileType()
    {
        var str=document.getElementById("FileUpload1").value;
        var pos=str.lastIndexOf(".");
        var lastname=str.substring(pos,str.length);
        if(lastname.toLowerCase()!=".jpg"&&lastname.toLowerCase()!=".gif")
        {
            alert("您上传的文件类型为"+lastname+"，图片必须为.jpg,.gif类型");
            return false;
        }
        else
        {
            return true;
        }        
    }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <table>
            <tr>
                <td colspan="2">
                    客户端检查上传文件类型</td>                
            </tr>
            <tr>
                <td style="width: 444px">
                    <asp:FileUpload ID="FileUpload1" runat="server" Width="432px" /></td>
                <td style="width: 80px">
                    <asp:Button ID="bt_upload" runat="server" Text="上传图片" OnClick="bt_upload_Click" OnClientClick="return Check_FileType()" /></td>
            </tr>
            <tr>
                <td colspan="2" style="height: 21px">
                    <asp:Label ID="lb_info" runat="server" ForeColor="Red" Width="515px"></asp:Label></td>                
            </tr>
        </table>    
    </div>
    </form>
</body>
</html>


注意：点击上传时先触发客户端事件OnClientClick="return Check_FileType()"

<!--

Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

-->using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

public partial class _Default : System.Web.UI.Page 
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }

    protected void bt_upload_Click(object sender, EventArgs e)
    {
        try
        {
            if (FileUpload1.PostedFile.FileName == "")
            {
                this.lb_info.Text = "请选择文件！";
            }
            else
            {
                string filepath = FileUpload1.PostedFile.FileName;
                //if (!IsAllowedExtension(FileUpload1))
                //{
                //    this.lb_info.Text = "上传文件格式不正确！";
                //}
                if (IsAllowedExtension(FileUpload1) == true)
                {
                    string filename = filepath.Substring(filepath.LastIndexOf("\\") + 1);
                    string serverpath = Server.MapPath("~/images/") + filename;
                    FileUpload1.PostedFile.SaveAs(serverpath);
                    this.lb_info.Text = "上传成功！";
                }
                else
                {
                    this.lb_info.Text = "请上传图片！";
                }
            }
        }
        catch (Exception ex)
        {
            this.lb_info.Text = "上传发生错误！原因：" + ex.ToString();
        }
    }
    private static bool IsAllowedExtension(FileUpload upfile)
    {
        string strOldFilePath = "";
        string strExtension="";
        string[] arrExtension ={ ".gif", ".jpg", ".bmp", ".png" };
        if (upfile.PostedFile.FileName != string.Empty)
        {
            strOldFilePath = upfile.PostedFile.FileName;//获得文件的完整路径名
            strExtension = strOldFilePath.Substring(strOldFilePath.LastIndexOf("."));//获得文件的扩展名，如：.jpg
            for (int i = 0; i < arrExtension.Length; i++)
            {
                if (strExtension.Equals(arrExtension[i]))
                {
                    return true;
                }
            }
        }
        return false;
    }
}


注意：若去掉客户端的脚本和客户端事件OnClientClick="return Check_FileType()"，在后台代码
改为：

<!--

Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

-->if (!IsAllowedExtension(FileUpload1))
                {
                    this.lb_info.Text = "上传文件格式不正确！";
                }
else if (IsAllowedExtension(FileUpload1) == true)


即变成服务器端检查上传文件类型。

5  服务器端检查上传文件的类型（文件内部真正的格式）

<!--

Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

--><body>
    <form id="form1" runat="server">
    <div>
        <table>
            <tr>
                <td colspan="2">
                    服务器检查上传文件类型</td>                
            </tr>
            <tr>
                <td style="width: 444px">
                    <asp:FileUpload ID="FileUpload1" runat="server" Width="432px" /></td>
                <td style="width: 80px">
                    <asp:Button ID="bt_upload" runat="server" Text="上传图片" OnClick="bt_upload_Click" /></td>
            </tr>
            <tr>
                <td colspan="2" style="height: 21px">
                    <asp:Label ID="lb_info" runat="server" ForeColor="Red" Width="515px"></asp:Label></td>                
            </tr>
        </table>    
    </div>
    </form>
</body>

后台代码：

<!--

Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

-->using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.IO;

public partial class _Default : System.Web.UI.Page 
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }
    protected void bt_upload_Click(object sender, EventArgs e)
    {
        try
        {
            if (FileUpload1.PostedFile.FileName == "")
            {
                this.lb_info.Text = "请选择文件！";
            }
            else
            {
                string filepath = FileUpload1.PostedFile.FileName;
                if (IsAllowedExtension(FileUpload1) == true)
                {
                    string filename = filepath.Substring(filepath.LastIndexOf("\\") + 1);
                    string serverpath = Server.MapPath("images/") + filename;
                    FileUpload1.PostedFile.SaveAs(serverpath);
                    this.lb_info.Text = "上传成功！";
                }
                else
                {
                    this.lb_info.Text = "请上传图片";
                }
            }
        }
        catch (Exception error)
        {
            this.lb_info.Text = "上传发生错误！原因：" + error.ToString();
        }
    }
    private static bool IsAllowedExtension(FileUpload upfile)
    {
        FileStream fs = new FileStream(upfile.PostedFile.FileName, FileMode.Open, FileAccess.Read);
        BinaryReader r = new BinaryReader(fs);
        string fileclass = "";
        byte buffer;
        try
        {
            buffer = r.ReadByte();
            fileclass = buffer.ToString();
            buffer = r.ReadByte();
            fileclass += buffer.ToString();
        }
        catch
        { 
            
        }
        r.Close();
        fs.Close();
        if (fileclass == "255216" || fileclass == "7173"||fileclass=="6677"||fileclass=="13780")//说明255216是jpg;7173是gif;6677是BMP,13780是PNG;7790是exe,8297是rar
        {
            return true;
        }
        else
        {
            return false;
        }
    }
}

html中咋样上传照片,如何通过html上传照片（自定义上传图标）
weixin_29545089的博客
06-08 8913
在移动web的开发过程中。我们常常会遇到这样问题。就是上传照片。那么我们所知道的上传控件其实有很多。以.NET为例则有FileUpload控件。这个控件上传比较容易。但是样式比较丑陋。接下来我们讲讲如何利用html上传照片。废话不多说。我们来看一段html代码 账号头像*：修改头像从上面的代码我们可以看到。我们上传的控件外部使用的是form表单。enctype：表示的是我们的表单类型target：...
html图片上传和显示
12-14
简单易用，图片的上传和预览功能，希望能帮助大家。
html图片的上传
m0_62581697的博客
02-20 1397
用于存储上传成功后的图片 URL。修改还剩一些，例如，进行完这些上传的图片不显示。我们需要给隐藏于设置值，这样修改的图片才能显示。以上便可以实现图片的上传和修改。将原先imgurl部分修改为。以上便可以实现图片的上传。在这段代码中，隐藏域（
HTML5图片上传与预览功能实现指南
最新发布
weixin_28933797的博客
06-06 804
在当今Web应用中，上传图片是一个非常常见的功能需求。随着HTML5标准的推出，我们可以仅使用原生JavaScript和HTML5来实现这一功能，无需依赖第三方插件。这样不仅可以减少页面加载时间，还可以提供更加流畅的用户体验。FileReader API允许Web应用程序异步读取存储在用户计算机上的文件（例如用户选择的文件）。读取的方式可以是将文件内容读入内存，也可以读取为Data URL格式的字符串。这是一个十分重要的特性，因为它允许开发者在不上传文件到服务器的情况下处理文件内容。
关于HTML中上传图片
喜欢做一些demo，和分享遇到的 BUG
10-14 4万+
关于HTML中上传图片 值得注意的是：当一个表单里面包含这个上传元素的时候，表单的enctype必须指定为multipart/form-data,method必须指定为post，浏览器才会认识并正确执行。但是还有一点，浏览器只允许用户点击&lt;input type="file"&gt;来选择本地文件，用JavaScript对&lt;input type="file"&gt;的value赋值是没...
js实现对上传图片进行压缩并且预览
热门推荐
感恩、奋进、自信
12-08 5万+
js实现对上传图片的路径转成base64编码，并且对图片进行压缩，实现预览功能 需要先引入jquery:  1、html如下 2、css如下 #previewImg{ background-color: black; width: 400px;
Html 上传图片
weixin_30731305的博客
04-05 313
1.HTML 端代码 <form action="UploadImg.ashx" method="POST" enctype="multipart/form-data"> 文件名:<input type="text" name="txtName" value="23" /><br /> <input type="...
基于HTML５图片上传插件.zip
02-12
这个名为"基于HTML5图片上传插件.zip"的压缩包文件，显然包含了一个使用HTML5技术实现的图片上传功能的插件源代码。下面我们将深入探讨HTML5在图片上传方面的应用以及与多媒体和游戏相关的知识点。 首先，HTML5中的...
html5拖拽排序多图片上传插件特效源码
04-25
HTML5作为当前网页开发中广泛使用的标准，它在多媒体和交互性方面具有强大能力，尤其在图片上传与管理方面提供了丰富的API。本文所涉及的html5拖拽排序多图片上传插件特效源码，是基于HTML5的Drag & Drop API开发的...
HTML5.zip_beautiful_html5图片上传_多图片上传
09-19
在本实例中，我们将深入探讨如何使用HTML5实现一个美观且功能完善的多图片上传功能。 一、HTML5的新特性 1. 文件API：HTML5中的File API允许开发者直接在浏览器中处理用户选择的文件，包括读取、写入和上传。这为...
HTML5 Plus 实现手机APP拍照或相册选择图片上传功能
09-28
通过调用`plus.camera.getCamera()`方法，我们可以获取到摄像头对象，然后调用其提供的方法如`captureImage()`来进行拍照操作，拍摄的照片会以文件路径的形式返回，可以进一步用于图片上传。 接着是`GalleryIO`模块...
html5手机端上传图片
03-06
HTML5是现代网页开发的重要标准，它为网页应用带来了许多增强功能，其中之一就是对手机端图片上传的支持。在移动设备上，用户可能希望通过点击或拖拽来上传照片，或者从设备的媒体库中选择图片。以下是对这个主题的...
表单图片上传
11-02
表单图片上传,form图片上传 免缓存 图片上传 图片上传
html实现图片上传的效果
卓卓卓
02-02 5067
<html> <head></head> <style> *{ padding: 0; margin: 0 atuo; } .top{ height: 300px; width: 1000px; display: flex; justify-content: space-between; } .left{ text-align: center; width...
HTML控件之图片上传
浪漫骑士的专栏
09-09 2061
1.file控件2.在项目文件中建立一个文件夹up //文件上传        //获取上传文件的全路径（D:/图片/桌面/windows701.bmp）        string fullFileName=this.File1.PostedFile.FileName;        //截取全路径使得路径只剩下文件名(windows701.bmp)        string file
html 图片上传预览
11-02 149
Html5 upload img 2012年12月27日 20:36 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-"> <title>html...
HTML图片上传
qq_39842184的博客
02-12 520
该文档描述了一个基于Vue 3和Element Plus的图片上传组件。该组件允许用户上传图片文件，支持批量上传、图片预览、删除和清空功能。组件还包含图片格式和大小的验证，确保上传的图片符合要求。该图片上传组件功能完善，支持批量上传、图片预览、删除和清空功能，并且在上传前会对图片格式和大小进行验证，确保上传的图片符合要求。通过该组件，用户可以方便地上传和管理图片文件。
html上传图片
weixin_33693070的博客
04-13 174
上传图片是一个经常能用到的功能，比如，用户修改自己的图像，后台模块新增操作也经常涉及到图片上传。只要会涉及到图片上传，很多人可能会想到的是插件，然后都已经html5啦，已经有简单的写法了哟。下面就来看看吧~ html部分的代码 <input type="file" name="image" id="uploadFile" style="display:none;"> ...
(转)html中使用表单和input file上传图片
weixin_34208185的博客
02-11 299
本文转载自：http://hi.baidu.com/love_1210/item/120e452b42b2a854c38d59eb   客户端代码：  &lt;form name="form1" method="post" enctype="multipart/form- data" action="requestfile/asprece.aspx"&gt;//如果file框没有加runat...
HTML图片上传及展示特效实现
针对这一需求，HTML图片上传网页特效就显得格外重要，它是实现这一功能的前端实现方式之一。 ### HTML图片上传基础 在HTML中，图片上传功能主要通过`<input>`标签实现，特别是它的`type="file"`属性。这个属性允许...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值