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多檔案上傳功能，值得推薦。