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 {
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））

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）;
} else {
￥（""＃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""， {
action: ""upload.htm""，
name: ""myfile""，
onComplete : function（file）{
￥（""<li></li>""）.appendTo（￥（""＃example3 .files""））.text（file）;
}
}）;
應用jQuery插件AjaxFileUpload文件上傳功能很是強大，內置函數定義的事務和交互斗勁多，大師可看看上方三個實例的演示，實現Javascript多文件上傳功能，值得推薦。

總結

以上是生活随笔為你收集整理的jQuery插件AjaxFileUpload文件上传实现Javascript多文件上传功能的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。