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 {

}

}， 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）;

￥（""＃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""， {

￥（""<li></li>""）.appendto（￥（""＃example3 .files""））.text（file）;

应用jquery插件ajaxfileupload文件上传功能很是强大，内置函数定义的事务和交互斗劲多，大师可看看上方三个实例的演示，实现javascript多文件上传功能，值得推荐。