File Uploader：支援進度顯示與檔案拖拽的多檔案上傳前端JS指令碼
File Uploader的前身是Ajax Upload。按照官方的說法，升級到FileUploader主要是添加了一些新的特性，修正了一些比較嚴重的錯誤。但在我這個使用者看來，二者最大的不同在於：File Uploader不在基於jQuery。另外，File Uploader也更加嚴格，例如返回值只能是JSON格式，等。Ajax Upload中一些需要寫到後臺伺服器上的程式碼（如上傳檔案的格式篩選），或者對前端DOM的操作（如onSubmit、onComplete事件中自定義的程式碼等），都直接整合到了File Uploader的JS指令碼中。總的說來，File Uploader是一款功能強大的JS檔案上傳外掛，支援顯示上傳進度、檔案拖拽到瀏覽器中上傳、多檔案上傳、頁面無重新整理、無序多餘外掛、跨瀏覽器、跨後臺語言等等特性。
官方網站如下：
下載的檔案目錄結構如下圖所示：
其中可供使用的是client目錄和server目錄下的若干檔案：
client目錄
fileuploader.js：主要JS指令碼檔案，前端的所有功能都在該指令碼中實現。必需。使用時需要通過<script>標籤匯入到HTML檔案中；
fileuploader.css：提供JS指令碼中所需的CSS樣式，主要包括按鈕的樣式、進度顯示的樣式以及上傳結果的樣式。必需。需要通過<link>標籤匯入HTML檔案中；
loading.gif：進度顯示所需的動態圖片檔案。必需。在fileuploader.css檔案中被呼叫。
server目錄
該目錄提供的是伺服器端程式碼的示例程式，包括：
基於Servlet實現的Java程式碼：OctetStreamReader.java
基於PHP的實現：php.php
基於Perl的實現：perl.cgi
三者擇其一即可。
下面這段程式碼是前端對File Uploader最簡單的呼叫：
<!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type"content="text/html; charset=utf-8" /> <title>file uploader</title> <script type="text/javascript"src="fileuploader.js"></script> <link rel="stylesheet"type="text/css" href="fileuploader.css"/> <script type="text/javascript"> window.onload = function() { new qq.FileUploader({ element:document.getElementById("uploader"), action:"http://localhost/fileUpload/save.php", }); } </script> </head> <body> <div id="uploader"></div> </body> </html>
前端的一般的步驟是：
1. 匯入fileuploader.js、fileuploader.css指令碼；
2. 例項化qq.FileUploader物件
qq.FileUploader的引數陣列中包含如下屬性：
element：載入FileUploader外掛的DOM元素，通過DOM操作獲取，通常是<div>，也可以是任何塊級元素標籤，如<span>、<p>等，必需；
action：伺服器端接受並儲存檔案的程式路徑，與<form>標籤中的action屬性類似，必需；
params：需要傳送給伺服器端的額外資料，key-value格式的陣列，通過POST方法傳送，格式如下：
params: {
param1: “value1”,
param2: “value2”
}
allowedExtensions：允許上傳的檔案的字尾名陣列，格式如下：
allowedExtensions: [‘jpg’, ‘gif’, ‘bmp’, ‘png’]
sizeLimit：上傳檔案大小的上限，單位為byte的數值（瀏覽器不一定支援本設定）；
minSizeLimit：上傳檔案大小的下限，單位為byte的數值（瀏覽器同樣不一定支援）；
debug：是否使用瀏覽器的控制檯列印File Uploader的除錯資訊，預設為false；
另外，引數陣列中還包含了4個事件處理函式可供實現（非必需）：
檔案提交：onSubmit: function(id, fileName) {}
正在上傳：onProgress: function(id, fileName, loaded, total) {}
上傳完成：onComplete: function(id, fileName, responseJSON) {}
取消上傳：onCancel: function(id, fileName) {}
其中的引數：
id，表示是第幾個上傳的檔案，從0開始計數；
fileName，表示上傳的檔名稱；
loaded，表示已經上傳了的資料大小；
total，表示總共的檔案大小；
responseJSON，表示返回的JSON資料。
引數陣列中還包含了訊息處理函式以及params的其它設定方法，不太常用，詳情頁參見官方文件。
後臺伺服器端如果想省事，可以直接使用server目錄下的相應程式碼，或按照官方給的示例改寫程式碼。
需要特別說明的是：
1. 載入FileUploader外掛的DOM元素element，其樣式在指令碼中已經固定了，就算是在給element設定了新的樣式也會被覆蓋掉。如果想修改element的樣式，需要在fileuploader.js的487行到491行（template處）以及對應的fileuploader.css樣式中修改。
2. 同理，如果想修改進度顯示的樣式，需要在fileuploader.js的494行到500行（fileTemplate處）以及對應的fileuploader.css樣式中修改。
3. 如果出現“increase post_max_size and upload_max_filesize to 10M”錯誤，需要在php.ini檔案中把post_max_size和upload_max_filesize兩項的值改到10M以上，然後重啟Apache。
4. FileUploader上傳的檔案資料資訊，Java通過HttpServletRequest物件獲取，並能直接從中抽取資料流，不用管索引值；而PHP則通過$_FILES陣列獲取，預設的索引值為“qqfile”，該索引值在fileuploader.js檔案的964行與1197行指定，也可以在這些地方修改（雖然沒有必要）。
5. 伺服器端程式碼中設定檔案儲存路徑的位置：PHP：php.php檔案的第160行；Java：OctetStreamReader.java檔案的第102行。