Asp.Net 用Jquery和一般处理程序实现无刷新上传大文件
Asp.Net 用Jquery和一般处理程序实现无刷新上传大文件
上传文件算是比较常规的一个功能，Asp.Net自带了一个上传控件 FileUpload ，简单易用但是体验不太好，所有开发者经常都会选择一个JS插件来进行上传,比如：Uploadify SWFupload 等等... 如果没有特别高的要求，也可以自已实现无刷新有等待效果的上传...
知识了解 |
|---|
- 利用jQuery Form Plugin的ajaxSubmit方法通过AJAX提交表单
表单提交后，在一般处理程序中HttpContext.Current.Request.Files才能获取客户端上传文件集合
http://www.malsup.com/jquery/form/#api
提交表单，上传时，等待效果可以在beforeSubmit回调函数中显示
http://www.malsup.com/jquery/form/#options-object
- 想要在HttpContext.Current.Request.Files中获取客户端上传文件集合
那么还要需要设置form的enctype属性，enctype默认为：application/x-www-form-urlencoded,
但是表单中含有上传控件时，enctype属性必须使用：multipart/form-dat，否则得到不客户端上传文件集合。
值 | 描述 |
|---|---|
application/x-www-form-urlencoded | 在发送前编码所有字符（默认） |
multipart/form-data | 不对字符编码。在使用包含文件上传控件的表单时，必须使用该值。 |
text/plain | 空格转换为 "+" 加号，但不对特殊字符编码。 |
更多相关：
http://www.w3school.com.cn/tags/att_form_enctype.asp
http://msdn.microsoft.com/zh-cn/library/system.web.httprequest.files(v=VS.80).aspx
- Asp.Net为了防止服务器攻击，对上传文件大小进行限制
默认大小为4096K，也就是4M; 如果大小超过限制会引发一个 ConfigurationErrorsException 异常; 对于图片上传来说4M基本能满足，但是对于文件上传来说，4M的最大上传限制明显不够;
这样就需自定义最大上传限制，我们可以通过修改Web.config文件中的httRuntime元素中的maxRequestLength元素
<system.web>
<httpRuntime maxRequestLength="2097151" executionTimeout="3600"/>
</system.web>maxRequestLength元素虽然可以自定义设置，但是最大也不能超过2097151KB（最大不能大于2G）
可以看到还设置了executionTimeout元素， executionTimeout元素表示请求允许被执行的秒数，默认为110秒（.Net Framework1.1 时默认为：90秒）;
当上传文件越大，执行请求的时间也就越长，所以根据设置的maxRequestLengtht适当的调整executionTimeout元素的值（单位为：秒）。
更多httRuntime 相关：
http://msdn.microsoft.com/zh-cn/library/e1f13641(v=vs.90).aspx
前后端实现代码 |
|---|
.aspx页中代码
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="FileUploadSample._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>Porschev--Asp.Net 使用Jquery和一般处理程序实现无刷新上传大文件</title>
<link href="!css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server" enctype="multipart/form-data">
<div class="carea">
<div class="ui-tabs-panel">
<div class="search_head">
<h3 class="sh_title">
Porschev--Asp.Net 使用Jquery和一般处理程序实现无刷新上传大文件</h3>
</div>
<ul class="info_input">
<li><b>选择文件：</b>
<div class="ii_conarea">
<input id="fulFile" name="fulFile" type="file" class="ful" />
<img id="imgUploading" src="!images/uploading.gif" alt="正在上传..." class="loading_img none" />
</div>
</li>
</ul>
<input id="btnSubmit" type="button" value="上传" class="btn_sub" />
</div>
</div>
</form>
</body>
</html>
<script src="!js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="!js/jquery.form.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$("#btnSubmit").click(function() {
if ($("[id$='fulFile']").val() == "") {
alert("请选择要上传的文件!");
return false;
}
$("[id$='form1']").ajaxSubmit({
url: "Handler/UploadHandler.ashx",
type: "post",
dataType: "text",
resetForm: "true",
beforeSubmit: function() {
$("[id$='fulFile']").hide();
$("[id$='imgUploading']").show();
$("[id$='btnSubmit']").hide();
},
success: function(msg) {
$("[id$='fulFile']").show();
$("[id$='imgUploading']").hide();
$("[id$='btnSubmit']").show();
if (msg == "1") {
alert("上传成功!");
}
else if (msg == "-2") {
alert("禁止上传 0 KB大小的文件!");
}
else if (msg == "-1") {
alert("请选择要上传的文件!");
}
else if (msg == "-0") {
alert("上传失败!");
}
return false;
},
error: function(jqXHR, errorMsg, errorThrown) {
$("[id$='fulFile']").show();
$("[id$='imgUploading']").hide();
$("[id$='btnSubmit']").show();
alert("错误信息:" + errorMsg);
return false;
}
});
});
});
</script>一般处理程序中代码
using System;
using System.IO;
using System.Web;
using System.Web.Services;
namespace FileUploadSample.Handler
{
/// <summary>
/// Summary description for $codebehindclassname$
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
public class UploadHandler : IHttpHandler
{
/// <summary>
/// 上传文件夹
/// </summary>
private const string UPLOAD_FOLDER = "~/UploadFile/";
public void ProcessRequest(HttpContext context)
{
int resultVal = (int)ReturnVal.Failed;
try
{
HttpPostedFile myFile = context.Request.Files["fulFile"];
if (myFile != null)
{
if (myFile.InputStream.Length != 0)
{
string originalFileName = Path.GetFileName(myFile.FileName); //原文件名
string newFileName = string.Format("{0}_{1}", Guid.NewGuid(), originalFileName); //新文件名---组成形式： GUID + 下划线 + 原文件名
string fileAbsPath = context.Server.MapPath(UPLOAD_FOLDER) + newFileName; //绝对路径
myFile.SaveAs(fileAbsPath);
resultVal = (int)ReturnVal.Succeed;
}
else
{
resultVal = (int)ReturnVal.FileEmpty;
}
}
else
{
resultVal = (int)ReturnVal.NotSelected;
}
}
catch (Exception)
{
resultVal = (int)ReturnVal.Failed;
}
finally
{
context.Response.Write(resultVal);
}
}
#region## 返回值
/// <summary>
/// 返回值
/// </summary>
private enum ReturnVal : int
{
/// <summary>
/// 不能上传 0 K大小的文件
/// </summary>
FileEmpty = -2,
/// <summary>
/// 未选中文件
/// </summary>
NotSelected = -1,
/// <summary>
/// 上传失败
/// </summary>
Failed = 0,
/// <summary>
/// 成功
/// </summary>
Succeed = 1
}
#endregion
public bool IsReusable
{
get
{
return false;
}
}
}
}实现截图 |
|---|
常见问题 |
|---|
- 无法获取客户端上传的文件，一般有三种情况
- 页面上没有 type="file" 标签
- form的enctype属性未设置成multipart/form-data
- 提交方法有问题，请注意JS源码中提交表单的ajaxSubmit方法 (Jquery.form.js 需要依赖于jquery.js)
源码下载 |
|---|
示例下载 示例代码Target Framework为：.NET Framework3.5^_^!