标签：
ajaxFileUpload是前两天学习过程中接触到的一个JQ插件，功能很简单，就是实现异步上传文件的功能。
1.语法介绍
$.ajaxFileUpload([setting]);
参数说明：
（1）url——执行上传处理的地址；
（2）secureuri——是否启用安全提交，默认为false；
（3）fileElementId——需要上传<input type=”file”>控件id属性值；
（4）data——自定义参数，即需要额外传递的JSON格式数据；
（5）type——请求方式，提交自定义参数时，这个参数要设置成post；
（6）dataType——服务器返回的数据类型，默认为HTML，可以为XML，JSON，HTML，SCRIPT。
（7）success——执行成功后的回调函数，参数data就是服务器返回的数据；
（8）error——执行失败后的回调函数。
2.使用方法
下面通过一个将图片上传后台并将上传成功后的图片显示在页面上的Demo来说明这个插件的具体使用方法。
先看前端代码：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="Scripts/jquery-1.8.0.js"></script>
<script src="Scripts/ajaxfileupload.js"></script>
<script type="text/javascript">
$(function () {
$.ajaxFileUpload()
$("#btnUpload").click(function () {
$.ajaxFileUpload({
url: "FileSaveHandler.ashx", //上传地址
secureuri: false, //是否加密
fileElementId: "imgTitle", //file控件id属性值
data: {}, //需要额外传递的数据
type: "post", //请求方式
success: function (data) { //执行成功回调函数
$("#imgShow").attr("src", $(data).text());
},
error: function (data, status, e)//响应失败处理函数
{
alert(e);
}
});
});
})
</script>
</head>
<body>
<input type="file" name="imgTitle" id="imgTitle" />
<input type="button" name="btnUploadd" id="btnUpload" value="上传" />
<hr />
<img src="" id="imgShow" />
</body>
</html>
后台代码：
public class FileSaveHandler : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
//接收前端传来的文件
HttpPostedFile file = context.Request.Files["imgTitle"];
//设置文件的保存路径
string path = "/Images/"+file.FileName;
//将保存路径映射成磁盘路径
string fullPath = context.Request.MapPath(path);
//将文件保存至服务器磁盘上
file.SaveAs(fullPath);
//在前端显示上传的图片文件
context.Response.Write(path);
}
public bool IsReusable
{
get
{
return false;
}
}
}
代码很简单有注释，不再详细说明。不过使用ajaxFileUpload插件时有两点需要注意：第一点，不要忘记引入jQuery与ajaxFileUpload插件，注意顺序。第二点，服务器返回的数据类型即dataType参数一定要大写，不设置该属性就代表返回HTML格式的数据。
3.实现原理
默认情况下，上传文件必须通过form表单提交，并且表单需要将属性enctype设置成"multipart/form-data"。ajaxFileUpload插件内部则是动态创建一个iframe，并且内嵌一个可以上传文件form表单，通过这种机制完成异步上传任务。有兴趣深究的哥们请参见下面这篇文章。
jquery插件--ajaxfileupload.js上传文件原理分析
标签：
原文地址：http://www.cnblogs.com/gao-yang/p/5084080.html
