ajax html fileupload,jQuery插件之ajaxFileUpload详细解析

功能：ajaxFileUpload是1个异步上传文件的jQuery插件

语法：$.ajaxFileUpload([options])

options参数说明：

url　                        上传处理程序地址。

fileElementId　　　需要上传的文件域的ID，即的ID。

secureuri　　　　  是不是启用安全提交，默许为false。

dataType　　　　  服务器返回的数据类型。可以为xml,script,json,html。如果不填写，jQuery会自动判断。

success　　　　　 提交成功后自动履行的处理函数，参数data就是服务器返回的数据。

error　　　　　　   提交失败自动履行的处理函数。

data 　　　　　　  自定义参数。这个东西比较有用，当有数据是与上传的图片相干的时候，这个东西就要用到了。

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是不是1致或不存在

5，其它自定义毛病    大家可以使用变量$error直接打印的方法检查各参数是不是正确，比起上面这些无效的毛病提示还是方便很多。

使用方法：

1.先引入jQuery与ajaxFileUpload插件，注意前后顺序。

2.HTML代码段

3.js代码

$(function ()

{

$(":button").click(function ()

{

ajaxFileUpload();

})

})

function ajaxFileUpload()

{

$.ajaxFileUpload({

url: '/upload.aspx', //用于文件上传的服务器端要求地址

secureuri: false, //是不是需要安全协议，1般设置为false

fileElementId: 'file1', //文件上传域的ID

dataType: 'json', //返回值类型 1般设置为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;

}

4.后台页面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();

}

}