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

相关推荐