`
胡火云
  • 浏览: 44489 次
  • 性别: Icon_minigender_1
  • 来自: 武汉
社区版块
存档分类
最新评论

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

 
阅读更多
<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;
}
}
}
分享到：
| 利用ASP.NET设计FTP文件上传
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    Asp.net上传图片

    使用标准HTML来进行图片上传 上传图片" OnClick="UploadButton_Click"/&gt; &lt;asp:Label ID="Lb_Info" runat="server" ForeColor="Red"&gt;&lt;/asp:Label&gt; ``` 这里的关键在于`&lt;input type="file"&gt;`标签...

    html5手机端上传图片

    HTML5是现代网页开发的重要标准，它为网页应用带来了许多增强功能，其中之一就是对手机端图片上传的支持。在移动设备上，用户可能希望通过点击或拖拽来上传照片，或者从设备的媒体库中选择图片。以下是对这个主题的...

    asp.net文件上传解决方案（图片上传、单文件上传、多文件上传、检查文件类型）

    小编之前也介绍了许多ASP...1 使用标准HTML来进行图片上传 前台代码： &lt;body&gt; &lt;form id=form1 runat=server&gt; 使用标准HTML来进行图片上传 &lt;input id=InputFile style=width: 399p

    html5 上传图片

    10. **性能优化**: 对于大量图片上传，可以考虑使用Web Workers进行多线程处理，或者采用分批次上传策略，以减少服务器压力和提高上传速度。 综上所述，"html5 上传图片"是一个涵盖前端交互、数据处理、用户体验、...

    基于HTML５图片上传插件.zip

    这个名为"基于HTML5图片上传插件.zip"的压缩包文件，显然包含了一个使用HTML5技术实现的图片上传功能的插件源代码。下面我们将深入探讨HTML5在图片上传方面的应用以及与多媒体和游戏相关的知识点。 首先，HTML5中的...

    html5,图片截取 上传

    HTML5是现代网页开发的标准，它在传统HTML的基础上引入了许多新的特性和功能，极大地提升了开发者构建交互式和富媒体网站的能力。在这个场景中，我们关注的是HTML5在图片截取和上传方面的应用。 图片截取功能通常是...

    html5上传图片

    总的来说，这个项目展示了HTML5如何结合CSS和JavaScript来创建一个用户友好的图片上传和裁剪功能，利用了HTML5的File API和Canvas元素，同时依赖jQuery来优化交互体验。这种技术在现代网页应用中非常常见，特别是在...

    html5微信手机端图片上传裁剪代码.zip

    总的来说，这个压缩包提供了一个基于HTML5的微信手机端图片上传和裁剪的解决方案，适用于开发微信小程序或者移动端网页应用。通过学习和理解这个代码，开发者可以掌握HTML5的File API、Canvas API，以及如何利用它们...

    html5+jquery+canvas 实现调用手机拍照上传图片

    在`canvasDemo-master`这个项目中，可能包含了实现上述功能的HTML、CSS和JavaScript代码，通过分析和学习这个示例，你可以深入理解如何结合HTML5、jQuery和Canvas来处理图片上传和旋转问题，这对于构建交互性强的...

    移动端图片上传，带php后台处理代码，完完整整，拿来既用

    在移动端开发中，图片...这个模块适合快速集成到已有项目中，对于不熟悉图片上传流程的开发者来说，是一个很好的起点。只要根据自己的服务器环境和需求进行适当的调整，就可以实现一个功能完善的移动端图片上传功能。

    解决phpcms v9在谷歌等浏览器中无法上传图片的问题，修改为H5上传

    通过以上步骤，我们可以成功地将phpcms V9的图片上传功能迁移到HTML5，不仅解决了在谷歌等现代浏览器中无法上传的问题，还提升了系统的稳定性和用户体验。同时，这也有助于系统适应未来浏览器技术的发展，避免因...

    HTML5移动端图片上传滤镜特效.zip

    总的来说，“HTML5移动端图片上传滤镜特效.zip”是一个结合了HTML5 Canvas、WebGL、JavaScript和可能的Web Worker技术的图片处理项目，它展示了如何在移动端利用现代Web技术为用户提供丰富的图片编辑体验。...

    uploadify H5版（uploadifive）基于html5的手机上传图片插件

    【标题】"uploadify H5版（uploadifive）基于html5的手机上传图片...开发者可以通过这个实例深入理解HTML5的File API，掌握上传插件的使用，以及如何与后端进行有效通信，从而在实际项目中实现高效稳定的图片上传功能。

    支持批量上传、JS图片预览的前端上传组件

    总的来说，这个上传组件结合了HTML5的新特性，提供了批量上传和图片预览功能，适用于需要处理大量文件上传的Web应用。它的实现涉及到前端开发的多个方面，包括文件操作API、浏览器兼容性处理以及用户体验设计，对于...

    HTML5 拍照上传图片

    在"HTML5拍照上传图片"这个主题中，我们主要关注的是如何利用HTML5的新特性来实现用户通过浏览器拍照并上传图片的功能。 首先，`getUserMedia`是HTML5中的一个关键接口，它允许网站访问用户的摄像头和麦克风设备。...

    HTML5.zip_beautiful_html5图片上传_多图片上传

    在本实例中，我们将深入探讨如何使用HTML5实现一个美观且功能完善的多图片上传功能。 一、HTML5的新特性 1. 文件API：HTML5中的File API允许开发者直接在浏览器中处理用户选择的文件，包括读取、写入和上传。这为...

    基于HTML5的批量上传图片

    HTML5是现代网页开发的重要标准，它引入了许多新特性，其中一项便是对文件操作的增强，使得批量上传图片成为可能。在传统的HTML4中，上传文件通常只能单个进行，而HTML5则允许用户选择多个文件，从而实现批量上传...

    html5点击上传头像选取本地图片上传代码

    总结起来，实现HTML5点击上传头像选取本地图片上传代码的关键步骤包括：创建文件输入元素，监听文件选择事件，使用FileReader预览图片，通过FormData封装文件，最后使用fetch或XMLHttpRequest发送文件到服务器。...

    PHP+jQuery+html5实现图片选取裁剪上传(兼容手机上传)

    "PHP+jQuery+html5实现图片选取裁剪上传(兼容手机上传)"是一个常见的技术组合，用于创建一个功能丰富的图片上传系统，该系统不仅支持桌面浏览器，还能够很好地在移动设备上运行。下面我们将详细探讨这一技术栈中的...

    HTML5多张图片上传删除代码.zip

    在这个“HTML5多张图片上传删除代码”示例中，我们主要探讨的是如何利用HTML5的File API、FormData对象以及JavaScript来实现用户可以一次性选择并上传多张图片，并且具有删除已选图片的功能。 首先，HTML5中的`...

Magicbox
Global site tag (gtag.js) - Google Analytics