本文最初發布於我的個人博客：Jerry的樂園
綜述
論壇或者貼吧經常會需要分享很多圖片，上傳圖片比較差的做法是上傳到中央服務器上，中央服務器再轉發給靜態圖片服務器。而這篇文章講介紹如何使用plupload對上傳過程進行優化，並繞過服務器直接批量上傳圖片到又拍雲上的方法。我寫了一個Demo，大家可以到http://zry656565.github.io/bulk-upload-to-UPYUN/查看，而本文集中會講到以下幾個重點：
- plupload庫
- 圖片的本地壓縮
- 多選圖片
- 繞過服務器直接批量上傳圖片到又拍雲
- 使用又拍的HTTP FORM API
- plupload的配置
plupload庫
plupload是一個支持非常豐富的圖片上傳插件。可以對低版本的瀏覽器通過Flash/Silverligh/html4支持批量上傳，而在高版本瀏覽器中則會優先使用html5接口上傳，這一切的判定都是自動的，可以說使用起來非常方便！其次plupload還支持在客戶端壓縮圖片、直接Drag&Drop來上傳等功能，具體大家就可以到它的官網上了解更多的信息。
在這里我們僅使用它的核心API，只需要引入一個文件即可。
<script src="lib/plupload-2.1.2/js/plupload.full.min.js"></script>
官方給出的核心API例子非常簡單，可以直接移步http://www.plupload.com/examples/core查看。核心API在理解上不存在什么困難，如果需要幫助可以在本文后面向我提問。
圖片的本地壓縮
一般在網頁中瀏覽的圖片質量需求不高，記得當初高中上課學PS，老師說網上的圖片分辨率設72就好了，打印的圖片的話得設300。所以用戶在上傳一張很大的照片時，比較好的做法是現在用戶的客戶端本地壓縮好這張圖片，並把壓縮后較小的圖片上傳，既不影響瀏覽效果，同時也能加快上傳速度，減小服務器的負擔。
圖片的本地壓縮功能在plupload中是支持的，只要在初始化它的時候傳入一個resize參數就好了。其中，寬度和高度可以根據實際情況設置，而quality是比較重要的一個參數，顧名思義，這個值設置得越小，圖片越小，但顯示的質量也會越差，這個就需要你自己權衡一下啦。
{
"resize": { "width": 200, "height": 200, "quality": 70 } }
多選圖片
批量上傳圖片的一個前置條件就是能夠多選圖片。多選文件是HTML5的一個標准特性，我們可以通過如下方式來開啟多選模式：
<form action="xxx"> Select images: <input type="file" name="img" multiple> <!-- multiple 在這兒是關鍵！--> <input type="submit"> </form>
根據一個非常優秀的jquery插件jQuery-File-Upload的瀏覽器支持中Multiple File selection這個小節所寫的那樣，IE一直發展到IE10才剛開始支持這個HTML5的特性，那么我們又不得不借助Flash神奇的力量來對低版本瀏覽器進行多選圖片的支持。幸運的是plupload已經幫我們做到了這一點，而且這一開關是默認開啟的。如果你覺得你不需要用到多選圖片，你可以設置multi_selection: false來關閉這個特性。
繞過服務器直接批量上傳圖片到又拍雲
又拍雲提供了HTTP FORM API。通過這個接口，我們就可以直接從瀏覽器端發起上傳圖片的請求，而不需要通過我們自己的服務器進行中轉，大大降低了開銷。
使用又拍的HTTP FORM API
使用這個接口，就需要向又拍雲發送一個表單。這個表單包含你所要上傳的文件，並且還需要包含policy和signature。Policy用於將上傳請求相關的參數，例如保存路徑，文件類型，預處理結果等，另外，也包含了上傳請求授時間等。而Signature用於安全校驗。
為了演示方便，此處直接使用javascript來生成Policy和Signature。但在實際使用中，為了安全性考慮，請在服務器端完成這個過程。下面的代碼在官方的demo基礎上做了些許修改，主要是使用了官方的測試帳號，關於這兩個參數的具體生成方法，請參考官方的文檔：http://docs.upyun.com/api/form_api/。
var options = {
'bucket': 'demonstration', 'save-key': '/test/filename.txt', 'expiration': Math.floor(new Date().getTime() / 1000) + 86400 }; // 查看更多參數：http://docs.upyun.com/api/form_api/#表單API接口簡介 var policy = window.btoa(JSON.stringify(options)); // 從 UPYUN 用戶管理后台獲取表單 API var form_api_secret = '1+JY2ZqD5UVfw6hQ8EesYQO50Wo='; // 計算簽名 var signature = md5(policy + '&' + form_api_secret);
plupload的配置
如何使得plupload可以配合又拍雲的HTTP FORM API，着實讓我頭疼了一番。在查看plupload的文檔中，無意中的發現卻讓我看到了曙光，Upload to Amazon S3這個鏈接吸引了我。Amazon S3的全稱是Amazon Simple Storage Service，它提供的雲存儲服務多多少少和又拍雲有些相似。
於是根據這篇文章中關於瀏覽器端配置的介紹，我琢磨出了上傳到又拍雲所需要的配置。其實說起來也很簡單，主要就是對url和multipart_params兩個參數進行配置。下面的例子中的options.bucket、policy和signature直接使用上一節計算出來的值。
var uploader = new plupload.Uploader({ ... url : 'http://v0.api.upyun.com/' + options.bucket, multipart_params: { 'Filename': '${filename}', // adding this to keep consistency across the runtimes 'Content-Type': '', 'policy': policy, 'signature': signature, }, ... });
總結
如此這般，終於實現了通過plupload繞過服務器，向又拍雲批量上傳圖片了。plupload真是一個很強大的庫，不過它對商業使用可以需要收費的哦，具體還是到它的官網上去了解吧！雖然在開頭已經提過了，這里還是在嘮叨一句：最終的demo效果可以到我創建的項目中看到，丟下鏈接：http://zry656565.github.io/bulk-upload-to-UPYUN/