jQuery异步上传文件插件ajaxFileUpload详细介绍

ajaxFileUpload插件概述与参数配置

ajaxFileUpload是一款用于实现文件异步上传功能的jQuery插件。

此处提供一个未注明具体版本的插件文件，以便后续直接使用，避免重复查找。

该插件的调用语法为：$.ajaxFileUpload([options])。

调用时需传入options参数对象，具体配置说明如下。

1、url：指定接收上传文件的服务器端处理程序地址。 2、fileElementId：指定需要上传的文件输入框的HTML元素ID，即对应<input type="file">标签的id属性值。 3、secureuri：是否启用安全提交协议，默认值为false。 4、dataType：指定服务器返回的数据类型，支持xml、script、json、html等。若未填写，jQuery会自动尝试判断。 5、success：定义提交成功后自动执行的回调函数，其参数data即为服务器返回的数据内容。 6、error：定义提交失败时自动执行的回调函数。 7、data：用于传递自定义参数。当上传文件的同时需要附带其他数据时，此参数非常关键。 8、type：当需要提交自定义参数时，建议将此值设置为post。

常见错误提示及排查方法如下：

1、SyntaxError: missing ; before statement错误 若出现此错误，请检查url路径是否可正常访问。 2、SyntaxError: syntax error错误 若出现此错误，请检查处理提交操作的服务器后台代码是否存在语法错误。 3、SyntaxError: invalid property id错误 若出现此错误，请检查文件输入框的属性ID是否正确存在。 4、SyntaxError: missing } in XML expression错误 若出现此错误，请检查文件上传控件的name属性是否一致或是否存在。 5、其他自定义错误 建议使用变量$error直接打印的方式检查各参数是否正确，这比上述模糊的错误提示更为直观有效。

Web Forms基础使用示例

具体使用步骤如下：

第一步：在页面中引入jQuery库文件与ajaxFileUpload插件文件。请注意引入顺序，必须先引入jQuery，后引入插件，这是所有jQuery插件的基本要求。

<script src="jquery-1.7.1.js" type="text/javascript"></script>
<script src="ajaxfileupload.js" type="text/javascript"></script>

第二步：编写HTML页面结构。

<body>
<p><input type="file" id="file1" name="file" /></p>
<input type="button" value="上传" />
<p><img id="img1" alt="上传成功啦" src="" /></p>
</body>

第三步：编写JavaScript交互代码。

<script src="jquery-1.7.1.js" type="text/javascript"></script>
<script src="ajaxfileupload.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$(":button").click(function () {
ajaxFileUpload();
            })
        })
function ajaxFileUpload() {
$.ajaxFileUpload
            (
                {
url: '/upload.aspx', //用于文件上传的服务器端请求地址
secureuri: false, //是否需要安全协议，一般设置为false
fileElementId: 'file1', //文件上传域的ID
dataType: 'json', //返回值类型 一般设置为json
success: function (data, status) //服务器成功响应处理函数
                    {
$("#img1").attr("src", data.imgurl);
if (typeof (data.error) != 'undefined') {
if (data.error != '') {
alert(data.error);
} else {
alert(data.msg);
                            }
                        }
                    },
error: function (data, status, e)//服务器响应失败处理函数
                    {
alert(e);
                    }
                }
            )
return false;
        }
</script>

第四步：编写后台处理页面upload.aspx的代码。

protected void Page_Load(object sender, EventArgs e)
        {
HttpFileCollection files = Request.Files;
string msg = string.Empty;
string error = string.Empty;
string imgurl;
if (files.Count > 0)
            {
files[0].SaveAs(Server.MapPath("/") + System.IO.Path.GetFileName(files[0].FileName));
msg = " 成功! 文件大小为:" + files[0].ContentLength;
imgurl = "/" + files[0].FileName;
string res = "{ error:'" + error + "', msg:'" + msg + "',imgurl:'" + imgurl + "'}";
Response.Write(res);
Response.End();
            }
        }

本实例完整代码可下载。

MVC架构下的文件上传实现

接下来提供一个基于MVC架构的实例：

控制器代码部分如下：

public class HomeController : Controller
    {
public ActionResult Index()
        {
return View();
        }
public ActionResult Upload()
 {
 HttpFileCollection hfc = System.Web.HttpContext.Current.Request.Files;
 string imgPath = "";
 if (hfc.Count > 0)
 {
 imgPath = "/testUpload" + hfc[0].FileName;
 string PhysicalPath = Server.MapPath(imgPath);
 hfc[0].SaveAs(PhysicalPath);
 }
 return Content(imgPath);
 }
 }

前端视图包含HTML与JS代码，上传成功后将返回图片的真实路径，并绑定到<img>标签的src属性中。

<html>
<head>
<script src="/jquery-1.7.1.js" type="text/javascript"></script>
<script src="/ajaxfileupload.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$(":button").click(function () {
if ($("#file1").val().length > 0) {
ajaxFileUpload();
                }
} else {
alert("请选择图片");
                }
            })
        })
function ajaxFileUpload() {
$.ajaxFileUpload
            (
                {
url: '/Home/Upload', //用于文件上传的服务器端请求地址
secureuri: false, //一般设置为false
fileElementId: 'file1', //文件上传空间的id属性 <input type="file" id="file" name="file" />
dataType: 'HTML', //返回值类型 一般设置为json
success: function (data, status) //服务器成功响应处理函数
                    {
alert(data);
$("#img1").attr("src", data);
if (typeof (data.error) != 'undefined') {
if (data.error != '') {
alert(data.error);
} else {
alert(data.msg);
                            }
                        }
                    },
error: function (data, status, e)//服务器响应失败处理函数
                    {
alert(e);
                    }
                }
            )
return false;
        }
</script>
</head>
<body>
<p><input type="file" id="file1" name="file" /></p>
<input type="button" value="上传" />
<p><img id="img1" alt="上传成功啦" src="" /></p>
</body>
</html>

附带参数的异步上传实例

最后提供一个上传图片并附带其他参数的实例：控制器代码如下。

public class HomeController : Controller
    {
public ActionResult Index()
        {
return View();
        }
public ActionResult Upload()
 {
 NameValueCollection nvc = System.Web.HttpContext.Current.Request.Form;
HttpFileCollection hfc = System.Web.HttpContext.Current.Request.Files;
 string imgPath = "";
 if (hfc.Count > 0)
 {
 imgPath = "/testUpload" + hfc[0].FileName;
 string PhysicalPath = Server.MapPath(imgPath);
 hfc[0].SaveAs(PhysicalPath);
 }
 //注意要写好后面的第二第三个参数
 return Json(new { Id = nvc.Get("Id"), name = nvc.Get("name"), imgPath1 = imgPath },"text/html", JsonRequestBehavior.AllowGet);
 }
 }

Index视图代码如下：

<html>
<head>
<script src="/jquery-1.7.1.js" type="text/javascript"></script>
<script src="/ajaxfileupload.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$(":button").click(function () {
if ($("#file1").val().length > 0) {
ajaxFileUpload();
                }
} else {
alert("请选择图片");
                }
            })
        })
function ajaxFileUpload() {
$.ajaxFileUpload
            (
                {
url: '/Home/Upload', //用于文件上传的服务器端请求地址
type: 'post',
data: { Id: '123', name: 'lunis' }, //此参数非常严谨，写错一个引号都不行
secureuri: false, //一般设置为false
fileElementId: 'file1', //文件上传空间的id属性 <input type="file" id="file" name="file" />
dataType: 'json', //返回值类型 一般设置为json
success: function (data, status) //服务器成功响应处理函数
                    {
alert(data);
$("#img1").attr("src", data.imgPath1);
alert("你请求的Id是" + data.Id + " " + "你请求的名字是:" + data.name);
if (typeof (data.error) != 'undefined') {
if (data.error != '') {
alert(data.error);
} else {
alert(data.msg);
                            }
                        }
                    },
error: function (data, status, e)//服务器响应失败处理函数
                    {
alert(e);
                    }
                }
            )
return false;
        }
</script>
</head>
<body>
<p><input type="file" id="file1" name="file" /></p>
<input type="button" value="上传" />
<p><img id="img1" alt="上传成功啦" src="" /></p>
</body>
</html>

此实例在异步上传图片的同时，会弹出显示自定义传输的参数。本实例代码可下载。

常见问题与调试技巧

2013年1月28日，在调试过程中发现一个问题：作为文件域(<input type="file">)必须包含name属性。如果缺少name属性，服务器将无法获取到上传的图片。例如，正确的写法应为<input type="file" id="file1" name="file1" />。

2013年1月28日，关于最经典的错误Object function (a,b){return new e.fn.init(a,b,h)} has no method 'handleError'，这是Google浏览器报出的错误，非常经典。不确定是版本问题还是确实存在该问题。经过多次上传测试找到根本原因：dataType参数必须大写，例如dataType: 'HTML'。