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多文件上传功能，值得推荐。

评论

1 楼 ssy341 2013-07-11  

说的简单了点，和官网的文档差不多，多文件上传也不是很好，不过可以参考学习下，谢谢