快捷導(dǎo)航

使用JS+plupload直接批量上傳圖片到又拍云

更新時(shí)間：2014年12月01日 08:55:01 投稿：hebedich

本文詳細(xì)介紹了通過js+plupload實(shí)現(xiàn)了繞過服務(wù)器，向又拍云批量上傳圖片的解決方法，十分的巧妙，也節(jié)省了服務(wù)器資源，這里推薦給有需要的小伙伴。

論壇或者貼吧經(jīng)常會(huì)需要分享很多圖片，上傳圖片比較差的做法是上傳到中央服務(wù)器上，中央服務(wù)器再轉(zhuǎn)發(fā)給靜態(tài)圖片服務(wù)器。而這篇文章講介紹如何使用plupload對(duì)上傳過程進(jìn)行優(yōu)化，并繞過服務(wù)器直接批量上傳圖片到又拍云上的方法。本文集中會(huì)講到以下幾個(gè)重點(diǎn)：

復(fù)制代碼代碼如下:

plupload庫

圖片的本地壓縮

多選圖片

繞過服務(wù)器直接批量上傳圖片到又拍云

使用又拍的HTTP FORM API

plupload的配置

plupload庫

plupload是一個(gè)支持非常豐富的圖片上傳插件。可以對(duì)低版本的瀏覽器通過Flash/Silverligh/html4支持批量上傳，而在高版本瀏覽器中則會(huì)優(yōu)先使用html5接口上傳，這一切的判定都是自動(dòng)的，可以說使用起來非常方便！其次plupload還支持在客戶端壓縮圖片、直接Drag&Drop來上傳等功能，具體大家就可以到它的官網(wǎng)上了解更多的信息。

在這里我們僅使用它的核心API，只需要引入一個(gè)文件即可。

復(fù)制代碼代碼如下:

官方給出的核心API例子非常簡單，可以直接移步http://www.plupload.com/examples/core查看。核心API在理解上不存在什么困難，如果需要幫助可以在本文后面向我提問。

圖片的本地壓縮

一般在網(wǎng)頁中瀏覽的圖片質(zhì)量需求不高，記得當(dāng)初高中上課學(xué)PS，老師說網(wǎng)上的圖片分辨率設(shè)72就好了，打印的圖片的話得設(shè)300。所以用戶在上傳一張很大的照片時(shí)，比較好的做法是現(xiàn)在用戶的客戶端本地壓縮好這張圖片，并把壓縮后較小的圖片上傳，既不影響瀏覽效果，同時(shí)也能加快上傳速度，減小服務(wù)器的負(fù)擔(dān)。

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

復(fù)制代碼代碼如下:

{

    "resize": {

        "width": 200,

        "height": 200,

        "quality": 70

    }

}

多選圖片

批量上傳圖片的一個(gè)前置條件就是能夠多選圖片。多選文件是HTML5的一個(gè)標(biāo)準(zhǔn)特性，我們可以通過如下方式來開啟多選模式：

復(fù)制代碼代碼如下:

<form action="xxx">

  Select images: <input type="file" name="img" multiple> <!-- multiple 在這兒是關(guān)鍵！-->

  <input type="submit">

</form>

根據(jù)一個(gè)非常優(yōu)秀的jquery插件jQuery-File-Upload的瀏覽器支持中Multiple File selection這個(gè)小節(jié)所寫的那樣，IE一直發(fā)展到IE10才剛開始支持這個(gè)HTML5的特性，那么我們又不得不借助Flash神奇的力量來對(duì)低版本瀏覽器進(jìn)行多選圖片的支持。幸運(yùn)的是plupload已經(jīng)幫我們做到了這一點(diǎn)，而且這一開關(guān)是默認(rèn)開啟的。如果你覺得你不需要用到多選圖片，你可以設(shè)置multi_selection: false來關(guān)閉這個(gè)特性。

繞過服務(wù)器直接批量上傳圖片到又拍云

又拍云提供了HTTP FORM API。通過這個(gè)接口，我們就可以直接從瀏覽器端發(fā)起上傳圖片的請(qǐng)求，而不需要通過我們自己的服務(wù)器進(jìn)行中轉(zhuǎn)，大大降低了開銷。

使用又拍的HTTP FORM API

使用這個(gè)接口，就需要向又拍云發(fā)送一個(gè)表單。這個(gè)表單包含你所要上傳的文件，并且還需要包含policy和signature。Policy用于將上傳請(qǐng)求相關(guān)的參數(shù)，例如保存路徑，文件類型，預(yù)處理結(jié)果等，另外，也包含了上傳請(qǐng)求授時(shí)間等。而Signature用于安全校驗(yàn)。

為了演示方便，此處直接使用javascript來生成Policy和Signature。但在實(shí)際使用中，為了安全性考慮，請(qǐng)?jiān)诜?wù)器端完成這個(gè)過程。下面的代碼在官方的demo基礎(chǔ)上做了些許修改，主要是使用了官方的測試帳號(hào)，關(guān)于這兩個(gè)參數(shù)的具體生成方法，請(qǐng)參考官方的文檔：http://docs.upyun.com/api/form_api/。

復(fù)制代碼代碼如下:

var options = {
    'bucket': 'demonstration',
    'save-key': '/test/filename.txt',
    'expiration': Math.floor(new Date().getTime() / 1000) + 86400
};
// 查看更多參數(shù)：http://docs.upyun.com/api/form_api/#表單API接口簡介
var policy = window.btoa(JSON.stringify(options));
// 從 UPYUN 用戶管理后臺(tái)獲取表單 API
var form_api_secret = '1+JY2ZqD5UVfw6hQ8EesYQO50Wo=';
// 計(jì)算簽名
var signature = md5(policy + '&' + form_api_secret);

plupload的配置

如何使得plupload可以配合又拍云的HTTP FORM API，著實(shí)讓我頭疼了一番。在查看plupload的文檔中，無意中的發(fā)現(xiàn)卻讓我看到了曙光，Upload to Amazon S3這個(gè)鏈接吸引了我。Amazon S3的全稱是Amazon Simple Storage Service，它提供的云存儲(chǔ)服務(wù)多多少少和又拍云有些相似。

于是根據(jù)這篇文章中關(guān)于瀏覽器端配置的介紹，我琢磨出了上傳到又拍云所需要的配置。其實(shí)說起來也很簡單，主要就是對(duì)url和multipart_params兩個(gè)參數(shù)進(jìn)行配置。下面的例子中的options.bucket、policy和signature直接使用上一節(jié)計(jì)算出來的值。

復(fù)制代碼代碼如下:

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,

    },

    ...

});

總結(jié)

如此這般，終于實(shí)現(xiàn)了通過plupload繞過服務(wù)器，向又拍云批量上傳圖片了。plupload真是一個(gè)很強(qiáng)大的庫，不過它對(duì)商業(yè)使用可以需要收費(fèi)的哦，具體還是到它的官網(wǎng)上去了解吧！

是不是很簡單呢，主要是思路很不錯(cuò)，值得我們?nèi)W(xué)習(xí)，有問題請(qǐng)跟我留言，大家共同進(jìn)步

您可能感興趣的文章: