分享一個自己寫的簡單的批量文件上傳插件,git地址:https://git.coding.net/lichmama/easyUpload.git
基於jQuery
關於兼容性:支持目前市場上絕大多數的瀏覽器,IE的話最好選擇IE10以上。
該插件很簡單,由三個文件組成:easyUpload.js,easyUpload.css,以及loading.gif
--代碼請從git獲取
參數說明:
maxSize: 單個文件允許上傳的最大尺寸
multiple: 是否允許一次選取多個文件
maxFiles:設置當前組件能處理的最大文件數
accept:支持選取的文件格式(后綴)
process:文件處理函數,可以根據實際應用編寫自己的邏輯
下面給出一個樣例,使用起來也很簡單:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta charset="UTF-8"> <title>easyUpload - 批量文件上傳</title> <link rel="stylesheet" href="easyUpload/easyUpload.css"> <script type="application/javascript" src="jquery/jquery.min.js"></script> <script type="application/javascript" src="easyUpload/easyUpload.js"></script> <script type="application/javascript"> $(function () { $('#fileUpload').easyUpload({ maxSize: 10485760, // 單個文件最大尺寸10MB multiple: true, // 支持選擇多個文件 maxFiles: 5, // 插件最多處理5個文件 accept: '.doc,.docx,.xls,.xlsx', // 僅上傳word或excel文件 process: function (file) { var returnValue = true; var formData = new FormData(); formData.append("file", file); $.ajax({ url: '/upload', type: 'post', processData: false, contentType: false, data: formData, success: function (result) { // do some business logic... }, error: function () { returnValue = false; } }) return returnValue; } }); }); </script> </head> <body> <div id="fileUpload"></div> </body> </html>
效果如下: