jQuery插件之ajaxFileUpload详细解析

功能:ajaxFileUpload是一个异步上传文件的jQuery插件

语法:$.ajaxFileUpload([options])

options参数说明:

url                         上传处理程序地址。

fileElementId   需要上传的文件域的ID,即<input type="file">的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是否一致或不存在

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

使用方法:

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

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

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

2.HTML代码段

<body>

<p><input type="file" id="file1" name="file" /></p>

<input type="button" value="上传" />

<p><img id="img1" alt="上传成功啦" src="" /></p>

</body>

3.js代码

<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>

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();

}

}

时间: 2024-11-05 16:27:06

jQuery插件之ajaxFileUpload详细解析的相关文章

jQuery插件jqplot的详细配置说明和渲染器

jQuery插件jqplot的详细配置说明和渲染器 (2012-08-23 08:57:42) 转载▼ 标签: jqplot 详细配置 渲染器 it 分类: 技术类 jQuery.jqplot插件的官方网址:http://www.jqplot.com/ jQuery.jqplot('target', data, options);//target:要显示的位置.data:显示的数据.options:其它配置 options: seriesColors: ["#4bb2c5", &quo

【转】jQuery插件之ajaxFileUpload

转自:http://www.cnblogs.com/kissdodog/archive/2012/12/15/2819025.html 一.ajaxFileUpload是一个异步上传文件的jQuery插件. 传一个不知道什么版本的上来,以后不用到处找了. 语法:$.ajaxFileUpload([options]) options参数说明: 1.url  上传处理程序地址. 2,fileElementId  需要上传的文件域的ID,即<input type="file">的

[Pulgin] jQuery插件之ajaxFileUpload

一.ajaxFileUpload是一个异步上传文件的jQuery插件. 传一个不知道什么版本的上来,以后不用到处找了. 语法:$.ajaxFileUpload([options]) options参数说明: 1.url  上传处理程序地址. 2,fileElementId  需要上传的文件域的ID,即<input type="file">的ID.3,secureuri 是否启用安全提交,默认为false. 4,dataType 服务器返回的数据类型.可以为xml,scrip

jQuery插件之ajaxFileUpload API文档

ajaxFileUpload是一个异步上传文件的jQuery插件. 语法:$.ajaxFileUpload([options]) options参数说明: 1.url  上传处理程序地址. 2,fileElementId  需要上传的文件域的ID,即<input type="file">的ID.3,secureuri 是否启用安全提交,默认为false. 4,dataType 服务器返回的数据类型.可以为xml,script,json,html.如果不填写,jQuery会自

jQuery插件之ajaxFileUpload(ajax文件上传)

一.ajaxFileUpload是一个异步上传文件的jQuery插件. 传一个不知道什么版本的上来,以后不用到处找了. 语法:$.ajaxFileUpload([options]) options参数说明: 1.url  上传处理程序地址. 2,fileElementId  需要上传的文件域的ID,即<input type="file">的ID.3,secureuri 是否启用安全提交,默认为false. 4,dataType 服务器返回的数据类型.可以为xml,scrip

jQuery插件之ajaxFileUpload异步上传

介绍 AjaxFileUpload.js 是一个异步上传文件的jQuery插件,原理是创建隐藏的表单和iframe然后用JS去提交,获得返回值. 下载地址: http://files.cnblogs.com/files/kissdodog/ajaxfileupload_JS_File.rar http://zhangzhaoaaa.iteye.com/blog/2123021 属性 语法:$.ajaxFileUpload([options]) url 上传处理程序地址. fileElementI

ASP.NET- 无刷新上传使用jQuery插件之ajaxFileUpload

灰常好,我已经使用过里面的代码了,可以用,原文地址:http://www.cnblogs.com/kissdodog/archive/2012/12/15/2819025.html 一.ajaxFileUpload是一个异步上传文件的jQuery插件. 传一个不知道什么版本的上来,以后不用到处找了. 语法:$.ajaxFileUpload([options]) options参数说明: 1.url  上传处理程序地址. 2,fileElementId  需要上传的文件域的ID,即<input t

jQuery插件之ajaxFileUpload[转载]

ajaxFileUpload.js 很多同名的,因为做出来一个很容易. 我用的是这个:https://github.com/carlcarl/AjaxFileUpload 下载地址在这里:http://files.cnblogs.com/files/kissdodog/ajaxfileupload_JS_File.rar AjaxFileUpload.js并不是一个很出名的插件,只是别人写好的放出来供大家用,原理都是创建隐藏的表单和iframe然后用JS去提交,获得返回值. 当初做了个异步上传的

jquery.cookie实战用法详细解析

Cookie是由服务器端生成,发送给User-Agent(一般是浏览器),浏览器会将Cookie的key/value保存到某个目录下的文本文件内,下次请求同一网站时就发送该Cookie给服务器(前提是浏览器设置为启用cookie). 例如购物网站存储用户曾经浏览过的产品列表,或者门户网站记住用户喜欢选择浏览哪类新闻. 在用户允许的情况下,还可以存储用户的登录信息,使得用户在访问网站时不必每次都键入这些信息? 怎么在js/jquery中操作处理cookie那?今天分享一个cookie操作类--jQ