jQuery插件AjaxFileUpload文件上传实现Javascript多文件上传功能



Ajax file upload plugin是一个功能强大的文件上传jQuery插件，可自定义链接、或其它元素庖代传统的file表单上传结果，可实现Ajax动态提示文件上传 过程，同时支撑多文件上传，AjaxFileUpload文件上传插件功能斗劲稳定，今朝应用也斗劲多，简单应用实例如下：

查看AjaxFileUpload相干jQuery官方文档介绍

AjaxFileUpload JS库文件
查看AjaxFileUpload演示
一，创建一个ajax upload按钮元素（button），可所以随便率性元素（链接、等），如下：

<div id="upload_button">上传</div>
二，创建一个ajax upload上传实例，如下：

new AjaxUpload（""upload_button_id""， {action: ""upload.php""}）;
此中upload_button_id默示第一步创建的元素ID，upload.php默示处理惩罚上传文件的PHP文件。

设备ajax upload

new AjaxUpload（""＃upload_button_id""， {
action: ""upload.php""，
name: ""userfile""，
data: {
example_key1 : ""example_value""，
example_key2 : ""example_value2""
}，
autoSubmit: true，
onChange: function（file， extension）{}，
onSubmit: function（file， extension） {}，
onComplete: function（file， response） {}
}）;
1，action默示处理惩罚上传文件的PHP文件
2，name默示上传文件name，与<input type="file" name="upload" />此中的upload
3，data默示额外的参数
4，autoSubmit默示是否主动提交
5，onChange默示触发change事务调用函数，此中extension默示文件后缀
6，onSubmit默示触发提交事务调用函数
7，onComplete默示文件上传成功事务调用函数

jQuery插件AjaxFileUpload文件上传实例代码一
实现ajax动态文字提示上传状况功能，分别触发onSubmit和onComplete事务

var button = ￥（""＃button1""）， interval;
new Ajax_upload（button，{
action: ""upload-test.php""，
name: ""myfile""，
onSubmit : function（file， ext）{
button.text（""Uploading""）;
this.disable（）;
interval = window.setInterval（function（）{
var text = button.text（）;
if （text.length < 13）{
button.text（text + "".""）;
} else {
button.text（""Uploading""）;
}
}， 200）;
}，
onComplete: function（file， response）{
button.text（""Upload""）;
window.clearInterval（interval）;
this.enable（）;
￥（""<li></li>""）.appendTo（""＃example1 .files""）.text（file）;
}
}）;
jQuery插件AjaxFileUpload文件上传实例代码二
实现文件后缀格局搜检功能，如：（ext && /^（jpg|png|jpeg|gif）￥/.test（ext））

new Ajax_upload（""＃button2""， {
action: ""upload.htm""，
data : {
""key1"" : "This data won""t"，
""key2"" : "be send because"，
""key3"" : "we will overwrite it"
}，
onSubmit : function（file ， ext）{
if （ext && /^（jpg|png|jpeg|gif）￥/.test（ext））{
this.set_data（{
""key"": ""This string will be send with the file""
}）;
￥（""＃example2 .text""）.text（""Uploading "" + file）;
} else {
￥（""＃example2 .text""）.text（""Error: only images are allowed""）;
return false;
}
}，
onComplete : function（file）{
￥（""＃example2 .text""）.text（""Uploaded "" + file）;
}
}）;
jQuery插件AjaxFileUpload文件上传实例代码三
最根蒂根基的多文件AjaxFileUpload上传功能

new Ajax_upload（""＃button3""， {
action: ""upload.htm""，
name: ""myfile""，
onComplete : function（file）{
￥（""<li></li>""）.appendTo（￥（""＃example3 .files""））.text（file）;
}
}）;
应用jQuery插件AjaxFileUpload文件上传功能很是强大，内置函数定义的事务和交互斗劲多，大师可看看上方三个实例的演示，实现Javascript多文件上传功能，值得推荐。