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

引用：http://cgxcn.blog.163.com/blog/static/1323124220095472652900/

Ajax file upload plugin是一个功能强大的文件上传jQuery插件，可自定义链接、图片或其它元素取代传统的file表单上传效果，可实现Ajax动态提示文件上传过程，同时支持多文件上传，AjaxFileUpload文件上传插件功能比较稳定，目前应用也比较多，简单使用实例如下：

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

下载AjaxFileUpload JS库文件

查看AjaxFileUpload演示

一，创建一个ajax upload按钮元素(button)，可以是任意元素(链接、图片等)，如下：

1. <div id="upload_button">上传</div>

二，创建一个ajax upload上传实例，如下：

1. new AjaxUpload('upload_button_id', {action: 'upload.php'});

其中upload_button_id表示第一步创建的元素ID，upload.php表示处理上传文件的PHP文件。

配置ajax upload

1. new AjaxUpload('#upload_button_id', {
2. action: 'upload.php',
3. name: 'userfile',
4. data: {
5. example_key1 : 'example_value',
6. example_key2 : 'example_value2'
7. },
8. autoSubmit: true,
9. onChange: function(file, extension){},
10. onSubmit: function(file, extension) {},
11. onComplete: function(file, response) {}
12. });

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

1. var button = $('#button1'), interval;
2. new Ajax_upload(button,{
3. action: 'upload-test.php',
4. name: 'myfile',
5. onSubmit : function(file, ext){
6. button.text('Uploading');
7. this.disable();
8. interval = window.setInterval(function(){
9. var text = button.text();
10. if (text.length < 13){
11. button.text(text + '.');
12. } else {
13. button.text('Uploading');
14. }
15. }, 200);
16. },
17. onComplete: function(file, response){
18. button.text('Upload');
19. window.clearInterval(interval);
20. this.enable();
21. $('<li></li>').appendTo('#example1 .files').text(file);
22. }
23. });

jQuery插件AjaxFileUpload文件上传实例代码二
实现文件后缀格式检查功能，如：(ext && /^(jpg|png|jpeg|gif)$/.test(ext))

1. new Ajax_upload('#button2', {
2. action: 'upload.htm',
3. data : {
4. 'key1' : "This data won't",
5. 'key2' : "be send because",
6. 'key3' : "we will overwrite it"
7. },
8. onSubmit : function(file , ext){
9. if (ext && /^(jpg|png|jpeg|gif)$/.test(ext)){
10. this.set_data({
11. 'key': 'This string will be send with the file'
12. });
13. $('#example2 .text').text('Uploading ' + file);
14. } else {
15. $('#example2 .text').text('Error: only images are allowed');
16. return false;
17. }
18. },
19. onComplete : function(file){
20. $('#example2 .text').text('Uploaded ' + file);
21. }
22. });

jQuery插件AjaxFileUpload文件上传实例代码三
最基础的多文件AjaxFileUpload上传功能

1. new Ajax_upload('#button3', {
2. action: 'upload.htm',
3. name: 'myfile',
4. onComplete : function(file){
5. $('<li></li>').appendTo($('#example3 .files')).text(file);
6. }
7. });

使用jQuery插件AjaxFileUpload文件上传功能非常强大，内置函数定义的事件和交互比较多，大家可看看上面三个实例的演示，实现Javascript多文件上传功能，值得推荐。