此篇文章主要是紀錄Agile Uploader的用法與注意事項。
上傳圖片是個很常用到的功能，以往的上傳方式都是用HTML的file來做上傳，並在server端檢查圖片大小、檔案格式、壓縮。然而隨著現在的照片解析度越來越大，server端收到的圖檔也越來越大，然而server端的頻寬與容量也有限，加上application也不需要這麼大解析度的檔案，因此server端還需要將檔案做壓縮，隨著前端技術越來越進步，壓縮檔案這件事也開始有人從前端開始直接做掉了，事實上這個概念非常的重要，使用者依然不需要考慮我要將檔案壓縮之後再上傳，並且加快上傳的速度，對server端來講，也不需要浪費多餘的頻寬來上載檔案，真的是一舉多得，功德一件。
因此我surver到這個免費的工具，而且還蠻不錯用，客製化程度也非常高，相當滿意。Agile Uploader
直接看官方DEMO。
他的概念是這樣的，利用Flash 來取得圖片，並且直接做壓縮，並且用flash的POST方式來POST到server端。如此即可完成上傳前壓縮圖檔。
不過在實做上，需注意以下幾點：
- 指定flash路徑
在實際專案你肯定不會用範例的路徑。 - 指定圖檔路徑：
在實際專案你肯定不會用範例的路徑。 - 修改CSS：agile-uploader.css
在實際專案你肯定不會用他預設的背景。 - 用firebug debug。
不知道為什麼，chrome看不到處理的response。而用firebug，你可以看到完整的POST資訊。 - 需注意單一檔案和多檔案上傳要有不同的判斷。
- 目前最新的version是3.0，不過文件是2.0，有很多method無法正常使用。
- 將POST方式想成是AJAX POST，任何server端回傳資訊需要傳回client做判斷。
重點來了，當你在實做時發現server端檢查某個欄位失敗，要怎麼做相對應的處理呢？別相信2.0的文件，你可能會看到看似可以處理的API，但是沒用。直接看程式碼才是最好的文件。http://www.shift8creative.com/app/webroot/agile-uploader/examples/agile-uploader-3.0.js ，在這隻主要的js裡頭，其實寫得還算蠻完整的，然而在事件的處理中，卻沒有辦法另外自訂Event。這讓我大失所望。以下是原本回傳的事件原始程式碼：
[sourcecode language=”javascript”]
/**
* Callback after the form is submitted and data is returned from the server.
* The data returned will vary depending on the script used, defined in the "form_action" variable.
* If there's a "submit_reidrect" then the user will be redirected.
*
* @param response {mixed} The server response
*/
$.fn.agileUploaderServerResponse = function(response) {
// If there's a div to put the return response data into, do so
if(typeof(opts.updateDiv) == 'string') {
$(opts.updateDiv).empty();
$(opts.updateDiv).append(response);
}
// Re-direct or empty the list so another submission can be made
if(typeof(opts.submitRedirect) == 'string') {
window.location = opts.submitRedirect;
} else {
$('#agileUploaderFileList').empty();
}
}
[/sourcecode]
如上，他做了回傳之後的的處理，不過卻沒有額外的自訂事件可以做指派，不過也還好他程式寫的蠻完整的，要修改起來也不難，你只要在這個function裡頭加入相對應的處理即可，所以你可以傳入server response callback function來處理。例如：
[sourcecode language=”javascript”]
$.fn.agileUploaderServerResponse = function(response) {
// If there’s a div to put the return response data into, do so
if(typeof(opts.updateDiv) == ‘string’) {
$(opts.updateDiv).empty();
$(opts.updateDiv).append(response);
}
if(typeof( opts.serverResponseCallback) == ‘function’){
opts.serverResponseCallback(response)
}
// Re-direct or empty the list so another submission can be made
if(typeof(opts.submitRedirect) == ‘string’) {
window.location = opts.submitRedirect;
} else {
$(‘#agileUploaderFileList’).empty();
}
}
[/sourcecode]
因此我只要在呼叫初始化時，傳如一個serverResponseCallback的函式，就可以針對回傳回來的response做處理了。打完收工。