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

最新推荐文章于 2023-08-01 09:24:27 发布
最新推荐文章于 2023-08-01 09:24:27 发布
阅读量1k 收藏
点赞数
分类专栏： Asp.Net技术篇 文章标签： html string server upload asp exception
< 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元素中，可以上传文件的唯一控件就是<input type="file">啦
weixin_30617737的博客
02-21 1688
值得注意的是：当一个表单里面包含这个上传元素的时候，表单的enctype必须指定为multipart/form-data,method必须指定为post，浏览器才会认识并正确执行。但是还有一点，浏览器只允许用户点击<input type="file">来选择本地文件，用JavaScript对<input type="file">的value赋值是没有任何效果的。当用户选择了...
html中咋样上传照片,如何通过html上传照片（自定义上传图标）
weixin_29545089的博客
06-08 8731
在移动web的开发过程中。我们常常会遇到这样问题。就是上传照片。那么我们所知道的上传控件其实有很多。以.NET为例则有FileUpload控件。这个控件上传比较容易。但是样式比较丑陋。接下来我们讲讲如何利用html上传照片。废话不多说。我们来看一段html代码 账号头像*：修改头像从上面的代码我们可以看到。我们上传的控件外部使用的是form表单。enctype：表示的是我们的表单类型target：...
html图片上传和显示
12-14
简单易用，图片的上传和预览功能，希望能帮助大家。
js实现对上传图片进行压缩并且预览
热门推荐
感恩、奋进、自信
12-08 5万+
js实现对上传图片的路径转成base64编码，并且对图片进行压缩，实现预览功能 需要先引入jquery:  1、html如下 2、css如下 #previewImg{ background-color: black; width: 400px;
html实现图片上传的效果
卓卓卓
02-02 4903
<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...
HTML5 Plus 实现手机APP拍照或相册选择图片上传功能
09-28
通过调用`plus.camera.getCamera()`方法，我们可以获取到摄像头对象，然后调用其提供的方法如`captureImage()`来进行拍照操作，拍摄的照片会以文件路径的形式返回，可以进一步用于图片上传。 接着是`GalleryIO`模块...
HTML5.zip_beautiful_html5图片上传_多图片上传
09-19
在本实例中，我们将深入探讨如何使用HTML5实现一个美观且功能完善的多图片上传功能。 一、HTML5的新特性 1. 文件API：HTML5中的File API允许开发者直接在浏览器中处理用户选择的文件，包括读取、写入和上传。这为...
基于HTML５图片上传插件.zip
最新发布
02-12
这个名为"基于HTML5图片上传插件.zip"的压缩包文件，显然包含了一个使用HTML5技术实现的图片上传功能的插件源代码。下面我们将深入探讨HTML5在图片上传方面的应用以及与多媒体和游戏相关的知识点。 首先，HTML5中的...
HTML5 图片上传 BASE64
06-11
HTML5是一种先进的网页标准，它引入了许多新的特性和功能，其中一项便是对图片上传的支持。在HTML5中，我们可以利用File API和Data URLs Scheme来实现图片的本地上传和以BASE64编码展示。这种技术使得用户可以在不...
html5手机端上传图片
03-06
HTML5是现代网页开发的重要标准，它为网页应用带来了许多增强功能，其中之一就是对手机端图片上传的支持。在移动设备上，用户可能希望通过点击或拖拽来上传照片，或者从设备的媒体库中选择图片。以下是对这个主题的...
html多图片上传并在线预览
01-10
html多图片上传并在线预览 用javascript实现
表单图片上传
11-02
表单图片上传,form图片上传 免缓存 图片上传 图片上传
html上传图片到服务器例子.zip
07-16
html上传图片到服务器例子
Html 上传图片
weixin_30731305的博客
04-05 250
1.HTML 端代码 <form action="UploadImg.ashx" method="POST" enctype="multipart/form-data"> 文件名:<input type="text" name="txtName" value="23" /><br /> <input type="...
html 图片上传预览
11-02 108
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编辑器上传图片word
Mr_Zang666的博客
08-01 174
"Servers" :[{"url":"www.ncmem.com"},{"url":"www.xproerui.com"}]//内部服务器地址(不下载此地址中的图片)JPG/PNG/GIF/BMP，推荐使用JPG格式，防止出现大图片。, "PasteImageType" : "" //粘贴文件，剪帖板的图片格式，为空表示本地图片格式。, "PasteImgSrc" : "" //shape:优先使用源公式图片，img:使用word自动生成的图片。
html上传图片
weixin_33693070的博客
04-13 125
上传图片是一个经常能用到的功能，比如，用户修改自己的图像，后台模块新增操作也经常涉及到图片上传。只要会涉及到图片上传，很多人可能会想到的是插件，然后都已经html5啦，已经有简单的写法了哟。下面就来看看吧~ html部分的代码 <input type="file" name="image" id="uploadFile" style="display:none;"> ...
(转)html中使用表单和input file上传图片
weixin_34208185的博客
02-11 267
本文转载自：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中上传与读取图片或文件（input file）
weixin_33542859的博客
06-02 379
1 2 3 4 5 6 content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">7 8 Document9 10 .kuang{11 display:inline-block;12 vertical-a...
ASP.NET图片上传教程：标准HTML控件方法
这篇内容主要讲解了如何在ASP.NET环境下实现图片的上传操作，特别是使用标准HTML控件进行图片上传的方法。 首先，我们看到前端HTML代码部分，这部分包含了一个`<form>`标签，设置了`runat="server"`，表明这是一个...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值