使用JS plupload直接批次上傳圖片到又拍雲_javascript技巧

論壇或貼吧常常需要分享很多圖片，上傳圖片比較差的做法是上傳到中央伺服器上，中央伺服器再轉發給靜態圖片伺服器。而這篇文章則講介紹如何使用plupload對上傳過程進行最佳化，並繞過伺服器直接批次上傳圖片到又拍雲上的方法。本文集中會講到以下幾個重點：

複製程式碼 程式碼如下:

plupload庫
圖片的本地壓縮
多選圖片
繞過伺服器直接批次上傳圖片到又拍雲
使用又拍的HTTP FORM API
plupload的設定

plupload庫

plupload是一個支援非常豐富的圖片上傳外掛程式。可以對低版本的瀏覽器透過Flash/Silverligh/html4支援批次上傳，而在高版本瀏覽器中則會優先使用html5介面上傳，這一切的判定都是自動的，可以說使用起來非常方便！其次plupload也支援在客戶端壓縮圖片、直接Drag&Drop來上傳等功能，具體大家就可以到它的官網上了解更多的資訊。

在這裡我們只使用它的核心API，只需要引入一個檔案。

複製程式碼 程式碼如下:

官方給的核心API範例很簡單，可以直接移步http://www.plupload.com/examples/core檢視。核心API在理解上不存在什麼困難，如果需要幫助可以在本文後面向我提問。

圖片的本地壓縮

一般在網頁瀏覽的圖片品質需求不高，記得當國高中上課學PS，老師說網路上的圖片解析度設72就好了，印出來的圖片的話得設300。所以用戶在上傳一張很大的照片時，比較好的做法是現在用戶的客戶端本地壓縮好這張圖片，並把壓縮後較小的圖片上傳，既不影響瀏覽效果，同時也能加快上傳速度，減小伺服器的負擔。

圖片的本地壓縮功能在plupload中是支援的，只要在初始化它的時候傳入一個resize參數就好了。其中，寬度和高度可以根據實際情況設置，而quality是比較重要的一個參數，顧名思義，這個值設置得越小，圖片越小，但顯示的質量也會越差，這個就需要你自己權衡一下啦。

複製程式碼 程式碼如下:

{
    "resize": {
        "width": 200,
        "height": 200,
        "quality": 70
    }
}

多選圖片

批次上傳圖片的一個前置條件就是能夠多選圖片。多選檔案是HTML5的一個標準特性，我們可以透過以下方式來開啟多選模式：

複製程式碼 程式碼如下:

  Select images:
 

根據一個非常優秀的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真是一個很強大的函式庫，不過它對商業使用可以需要收費的哦，具體還是到它的官網上去了解吧！

是不是很簡單呢，主要是思路很不錯，值得我們去學習，有問題請跟我留言，大家共同進步