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

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

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

下载AjaxFileUploadJS库文件

查看AjaxFileUpload演示

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

<divid="upload_button">上传</div>

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

newAjaxUpload('upload_button_id',{action:'upload.php'});

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

配置ajaxupload

newAjaxUpload('#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，与<inputtype="file"name="upload"/>其中的upload

3，data表示额外的参数

4，autoSubmit表示是否自动提交

5，onChange表示触发change事件调用函数，其中extension表示文件后缀

6，onSubmit表示触发提交事件调用函数

7，onComplete表示文件上传成功事件调用函数

jQuery插件AjaxFileUpload文件上传实例代码一

实现ajax动态文字提示上传状态功能，分别触发onSubmit和onComplete事件

varbutton=$('#button1'),interval;

newAjax_upload(button,{

action:'upload-test.php',

name:'myfile',

onSubmit:function(file,ext){

button.text('Uploading');

this.disable();

interval=window.setInterval(function(){

vartext=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))

newAjax_upload('#button2',{

action:'upload.htm',

data:{

'key1':"Thisdatawon't",

'key2':"besendbecause",

'key3':"wewilloverwriteit"

},

onSubmit:function(file,ext){

if(ext&&/^(jpg|png|jpeg|gif)$/.test(ext)){

this.set_data({

'key':'Thisstringwillbesendwiththefile'

});

$('#example2.text').text('Uploading'+file);

}else{

$('#example2.text').text('Error:onlyimagesareallowed');

returnfalse;

}

},

onComplete:function(file){

$('#example2.text').text('Uploaded'+file);

}

});

jQuery插件AjaxFileUpload文件上传实例代码三

最基础的多文件AjaxFileUpload上传功能

newAjax_upload('#button3',{

action:'upload.htm',

name:'myfile',

onComplete:function(file){

$('<li></li>').appendTo($('#example3.files')).text(file);

}

});

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