jQuery File Upload 是一款非常強大的文件上傳處理插件，支持多文件上傳，拖拽上傳，進度條，文件驗證及圖片音視頻預覽，跨域上傳等等。
可以說你能想到的功能它都有。你沒想到的功能它也有。。
不過由於功能太強大，使用起來還是需要點基本功，否則調試開發會遇到困難。
本文結合官方教程只介紹最基本的上傳功能。
以我目前最新的9.7.1版本
下載下來解壓到服務器能訪問到的地方。
文件如下：
1. 新建一個文件夾MyDemo或者你隨意。
把外面的server和js目錄拷貝到里面，注意server目錄里面包含gae-go、gae-python、php這些后端語言，只保留php就行。
2. 新建一html，內容如下，主要JS和CSS的路徑。還有有時候國內無法訪問ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js，可以引用本地的jQuery。
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>jQuery File Upload Example</title> <style> .bar { height: 18px; background: green; } </style> </head> <body> <input id="fileupload" type="file" name="files[]" data-url="server/php/" multiple> <script src="js/jquery-1.11.1.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); }); }, // 上傳過程中的回調函數 progressall: function (e, data) { var progress = parseInt(data.loaded / data.total * 100, 10); $(".bar").text(progress + '%'); $('#progress .bar').css( 'width', progress + '%' ); } }); }); </script> <!-- 進度條 --> <div id="progress"> <div class="bar" style="width: 0%;"></div> </div> </body> </html>
傳統上都是用<form>表單提交上傳，現在是純Ajax。需要注意的input的data-url屬性，這就是需要php服務端處理的路徑。
瀏覽器打開，以我的為例 http://localhost/my/JS/Plugins/jQuery-File-Upload-master/MyDemo/
由於是在本地測試，為了看到進度進度效果，建議找個大點的(~1G)文件上傳。可以直接拖個文件到瀏覽器窗口中。
效果如下，上傳過程中綠色進度條會不停的增加。
F12打開調試面板，耐心等待上傳完成，會看到上傳完成后，有ajax返回。
地址類似：http://localhost/my/JS/Plugins/jQuery-File-Upload-master/MyDemo/server/php/
返回的數據是JSON格式，內容類似：
{"files":[{"name":"1409665745-8365","size":1472358262,"type":"multipart\/form-data; boundary=----WebKitFormBoundaryxLzvFFmSOiWiY1Ka","error":"The uploaded file exceeds the post_max_size directive in php.ini"}]}
很明顯上傳文件太大了，超出php.ini限制。先不改了。
如果我們直接丟個圖片進去，返回的json類似：
{ "files": [ { "name": "10095978136d36c635.jpg", "size": 12479, "type": "image/jpeg", "url": "http://localhost/my/JS/Plugins/jQuery-File-Upload-master/MyDemo/server/php/files/10095978136d36c635.jpg", "thumbnailUrl": "http://localhost/my/JS/Plugins/jQuery-File-Upload-master/MyDemo/server/php/files/thumbnail/10095978136d36c635.jpg", "deleteUrl": "http://localhost/my/JS/Plugins/jQuery-File-Upload-master/MyDemo/server/php/?file=10095978136d36c635.jpg", "deleteType": "DELETE" } ] }
來到MyDemo\server\php\files 會發現上傳的圖片，而且thumbnail目錄還保存了裁剪過的圖片，這都是官方提供的UploadHandler.php的功勞。
至此，一個拖拽上傳文件的Demo完成了。但是功能仍然很弱，比如沒有文件類型及大小限制，沒有前台的錯誤提示。
官方提供的API有maxFileSize和acceptFileTypes。這在基本版里是不生效的，在UI版里才可以。具體的完善功能見第二篇