使用Ajaxupload.js上传文件

使用Ajaxupload.js上传文件

ajaxupload.js 是一款使用jquery上传文件的js插件,对于简单的文件上传,足够可以应付。

该插件主要有以下几个选项:

settings = {
action: ‘upload.php’,//要提交的地址
name: ‘userfile’,//参数名次
data: {},//和文件一起提交的其它参数
autoSubmit: true,//选中文件后是否就提交
responseType: false,//返回的相应格式,如果是text格式的,会在响应前后加上一个<pre></pre>标签
hoverClass: ‘hover’,
disabledClass: ‘disabled’,
onChange: function(file,extension){//在选中了文件的时候触发
},
onSubmit: function(file,extension){//在提交的时候触发
},
onComplete: function(file,response){//上传结束的时候触发
}
}

你可以使用非自动提交的方式上传文件。
代码示例如下:

var ajaxupload =new AjaxUpload($(“#uploadFile_button”),{
action: “upload.action”,
type:”POST”,
data:{},
autoSubmit:false,
responseType:”json”,
name:’file’,ext){
if(ext && (/^(xls)$/.test(ext) )){
alert(“只支持xls格式的文件”);
}
},

onComplete: function(file,resp){
alert(“上传成功”);
}
});

以上代码绑定了id=uploadFile_button的html元素,只要点击它,就会弹出选择文件的对话框。

当选中了文件,你就可以手动触发它上传文件,当然你也可以在正式提交前设置一些参数。

ajaxupload.setData({id,”1″});
ajaxupload.submit();

注意:当在chrome浏览器下面,该插件存在一个bug 就是重复选择相同的文件,onChange方法不会触发多次,
ajaxupload.js只适合简单的文件上传的场景,并没有显示速度的功能,也无法显示进度。
虽然该插件已经很久不再更新,但是使用简单,也有一些人一直在用。
如果你需要更强大的上传功能,ajaxupload.js可能不太适合你。

下载附件:

ajaxupload.3.9.js


【转载:http://zhaoyanblog.com/?p=83

相关文章

$.AJAX()方法中的PROCESSDATA参数 在使用jQuery的$.ajax()方...
form表单提交的几种方式 表单提交方式一:直接利用form表单提...
文章浏览阅读1.3k次。AJAX的无刷新机制使得在注册系统中对于...
文章浏览阅读1.2k次。 本文将解释如何使用AJAX和JSON分析器在...
文章浏览阅读2.2k次。/************************** 创建XML...
文章浏览阅读3.7k次。在ajax应用中,通常一个页面要同时发送...