©Copyright 蕃薯耀 2020-01-10 https://www.cnblogs.com/fanshuyao/ 一、官網地址： https://github.com/blueimp/jQuery-File-Upload 二、使用文檔（參數說明） https://github.com/blu ...
================================
©Copyright 蕃薯耀 2020-01-10
https://www.cnblogs.com/fanshuyao/
一、官網地址：
https://github.com/blueimp/jQuery-File-Upload
二、使用文檔（參數說明）
https://github.com/blueimp/jQuery-File-Upload/wiki/Options
三、瀏覽器支持（官網說明）
- Google Chrome
- Apple Safari 4.0+
- Mozilla Firefox 3.0+
- Opera 11.0+
- Microsoft Internet Explorer 6.0+
四、jQuery-File-Upload 入門使用
1、最簡單的使用方法：
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>jQuery File Upload Example</title> </head> <body> <input id="fileupload" type="file" name="files[]" data-url="server/php/" multiple> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="js/vendor/jquery.ui.widget.js"></script> <script src="js/jquery.iframe-transport.js"></script> <script src="js/jquery.fileupload.js"></script> <script> $(function () { $('#fileupload').fileupload({ dataType: 'json', done: function (e, data) { $.each(data.result.files, function (index, file) { $('<p/>').text(file.name).appendTo(document.body); }); } }); }); </script> </body> </html>
如果不使用iframe，jquery.iframe-transport.js文件可以不引用。
2、自定義使用
不顯示文件選擇框，只顯示上傳按鈕
<a id="btnUploadMdbFile" href="javascript:;" class="plui-linkbutton" >上傳mdb文件</a>
<div style="display: none;">
<input id="inputUploadMdbFile" type="file" name="mdbFiles" />
</div>
控制項初始化：
$(function(){ $("#btnUploadMdbFile").click(function(){ $("#inputUploadMdbFile").click(); }); //multiple 多選 //input限制文件上傳可以使用（IE9+）： accept="application/msaccess" accept="image/*" $("#inputUploadMdbFile").fileupload({ url : "${pageContext.request.contextPath}/xxx/fileUploadAction.go?method=fileUpload", dataType: "json", //autoUpload: false, formData: { "dirPath" : "temp_dir/mdb/" }, add: function(e, data){ //var acceptFileTypes = /^(gif|jpe?g|png)$/i; var acceptFileTypes = /^mdb$/i; var files = data.originalFiles; if(files && files.length > 0){ var isPass = true; for(var i=0; i<files.length; i++){ var name = files[i]["name"]; var lastIndex = name.lastIndexOf("."); if(lastIndex < 0){ isPass = false; break; }else{ var fileType = name.substring(lastIndex + 1); if(!acceptFileTypes.test(fileType)){ isPass = false; break; } } } if(!isPass){ top.$.messager.alert("系統提示","只能上傳*.mdb文件","info"); return; } data.submit(); } }, done: function(e, data){ //alert($.toJSON(data.result)); if(data.result && data.result.files && data.result.files.length > 0){ var file = data.result.files[0]; if(file.suffix == ".mdb"){ dealMdbFile(file.absolutePath); }else{ top.$.messager.alert("系統提示","只能上傳*.mdb文件","info"); } } } }); });
formData：可以傳遞自己的參數。
add: function(e, data){}：增加控制文件的類型限制，這個可以省略。
done: function(e, data){}：上傳成功後結果返回處理。
更多參數設置見：
https://github.com/blueimp/jQuery-File-Upload/wiki/Options
（如果你覺得文章對你有幫助，歡迎捐贈，^_^，謝謝！）
================================
©Copyright 蕃薯耀 2020-01-10
https://www.cnblogs.com/fanshuyao/
