Use Plupload to bypass the server, batch upload pictures to the cloud

This article was originally posted in my personal blog: Jerry's Paradise

Review

Forum or post bar often need to share a lot of pictures, upload pictures than the poor way to upload to the central server, the central server and then forwarded to the static image server. This article explains how to use plupload to optimize the upload process and bypass the way the server uploads images directly to and from the cloud. I wrote a demo, you can go to http://zry656565.github.io/bulk-upload-to-UPYUN/to view, and this article will focus on the following several points:

• Plupload Library
• Local compression of pictures
• Multi-Select picture
• Bypass the server directly batch upload pictures to the cloud
  • Use another shot of the HTTP FORM API
  • Configuration of the Plupload

Plupload Library

Plupload is a very rich image upload plugin. Can be on the low version of the browser through flash/silverligh/html4 support bulk upload, and in the high version of the browser will be preferred to use the HTML5 interface upload, all of the decision is automatic, it can be said to be very convenient to use! Second Plupload also support in the client compressed pictures, direct drag&drop to upload and other functions, specific people can go to its official website to learn more information.

Here we only use its core API, just to introduce a file.

<src="Lib/plupload-2.1.2/js/plupload.full.min.js" ></script>   

The official Core API example is very simple and can be viewed directly from Http://www.plupload.com/examples/core. The core API has no difficulty understanding, and if you need help, ask me later in this article.

Local compression of pictures

Generally in the Web page to browse the picture quality requirements are not high, remember the first high school to learn PS, the teacher said on-line picture resolution set 72 is good, print the picture of the words have to set 300. So the user uploads a very large photo, the better practice is now the user's client local compression of the picture, and the compression of the smaller image upload, not affect the browsing effect, but also can speed up the upload speed, reduce the burden of the server.

The local compression feature of the picture is supported in Plupload, as long as it is passed in as a parameter when it is initialized resize . Where the width and height can be set according to the actual situation, and quality is a more important parameter, as the name implies, the smaller the value is set, the smaller the picture, but the quality of the display will be worse, this need you weigh it.

{    "{        ", "        $," "    $"}

Multi-Select picture

A pre-condition for uploading images in bulk is the ability to select multiple images. Multi-Select file is a standard feature of HTML5, we can open the multi-select mode by the following way:

<form action= "xxx" > select images: < input type= "file" name=" img "multiple> <!--multiple here is the key! --<input type=" submit "></FORM>    

According to a very good jquery plugin Jquery-file-upload browser support in the multiple File selection This section, IE has been developed to IE10 support the features of this HTML5 is just beginning , then we have to use the magic power of Flash to the low-version of the browser to multi-select image support. Fortunately Plupload has done this for us, and this switch is on by default. If you feel that you do not need to use multiple selection images, you can set multi_selection: false to turn off this feature.

Bypass the server directly batch upload pictures to the cloud

Another shot of the cloud provides the HTTP FORM API. With this interface, we can initiate requests to upload images directly from the browser, without the need to relay through our own servers, greatly reducing the overhead.

Use another shot of the HTTP FORM API

With this interface, you need to send a form to and from the cloud. This form contains the files you want to upload, and it also needs to include policy and signature . Policy is used to upload request related parameters, such as save path, file type, preprocessing results, etc., also contains the upload request time and so on. The signature is used for safety checks.

For illustrative purposes, use JavaScript directly to generate policy and signature. However, in practical use, for security reasons, please complete this process on the server side. the following code in the official demo based on a few changes, mainly using the official test account, about the two parameters of the specific generation method, please refer to the official documentation: http://docs.upyun.com/api/form_api/.

var options = {' Bucket ':' Demonstration ',' Save-key ': '/test/filename.txt ', ' expiration ': Math.floor (new Date (). GetTime ()/ 1000) + 86400}; //See more parameters: http://docs.upyun.com/api/form_api/#表单API接口简介var policy = Window.btoa (json.stringify ( Options)); //From Upyun User management background Get form APIvar form_api_secret = ' 1+jy2zqd5uvfw6hq8eesyqo50wo= ';  Calculate the signature var signature = MD5 (policy + ' & ' + Form_api_secret);        

Configuration of the Plupload

How to make Plupload can match and pat the cloud HTTP FORM API, really let me a headache. In my view of Plupload's documentation, the inadvertent discovery made me see the light, and Upload to Amazon S3 this link attracted me. Amazon S3the full name is the Amazon simple Storage Service, which provides cloud storage services that are somewhat similar to the cloud.

So based on the introduction of the browser-side configuration in this article, I figured out the configuration needed to upload and shoot the cloud. In fact, it is very simple, mainly on url and multipart_params two parameters to configure. The following example options.bucket , policy and signature directly using the values calculated in the previous section.

New Plupload. Uploader ({    ...    ' http://v0.api.upyun.com/' + options.bucket,    multipart_params: {        ' signature ': Signature,}, ...}); 

Summarize

This, finally realized through the Plupload bypass the server, to the cloud batch upload pictures. Plupload is really a very powerful library, but it can be used for commercial use of the cost of the Oh, specifically to its official online to understand it! Although it has been mentioned at the beginning, here is still a nagging sentence: The final demo effect can be seen in the project I created, drop the link: http://zry656565.github.io/bulk-upload-to-UPYUN/

Resources

• Another pat on the cloud document-HTTP FORM API
• and Pat Cloud official JS Call Demo
• Plupload-upload to Amazon S3
• Plupload-plupload ignores server side error messages

Use Plupload to bypass the server, batch upload pictures to the cloud