Use Js+plupload to upload pictures directly to and shoot cloud _javascript tips

Forum or post bar often need to share a lot of pictures, upload pictures than the poor practice is uploaded to the central server, the central server and then to the static picture server. This article describes how to use plupload to optimize the upload process, and bypass the server to upload pictures directly to the cloud on the way. This article focuses on the following points:

Copy Code code as follows:

Plupload Library
Local compression of pictures
Multiple selection pictures
Bypassing the server to upload pictures directly to the cloud
Use the again-photographed HTTP FORM API
Configuration of Plupload

Plupload Library

Plupload is a very rich picture upload plugin. Can be for the lower version of the browser through the FLASH/SILVERLIGH/HTML4 support batch upload, and in the high version of the browser will be the priority to use the HTML5 interface upload, all of this is automatic, it can be said to use very convenient! Second, Plupload also supports the compression of pictures at the client, direct drag&drop to upload functions, and specifically you can go to its official web to learn more information.

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

Copy Code code as follows:

<script 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 doesn't have any difficulty understanding, and if you need help, ask me later in the article.

Local compression of pictures

Generally browsing in the Web page of the picture quality needs are not high, remember the first high school to learn PS, the teacher said the online picture resolution set 72, the printed picture of the words have to set 300. So the user upload a very large photo, better practice is now the user's client locally compressed this picture, and the compression of the smaller picture upload, neither affect the browsing effect, but also speed up upload speed, reduce the burden of the server.

The local compression of the picture is supported in Plupload, as long as it is initialized with a resize parameter. Which, width and height can be set according to the actual situation, and quality is a more important parameter, as the name suggests, the smaller the value set, the smaller the picture, but the quality of the display will be worse, this will need to weigh your own.

Copy Code code as follows:

{
"Resize": {
"width": 200,
"Height": 200,
"Quality": 70
}
}

Multiple selection pictures

Batch upload a picture of a precondition is to be able to select more pictures. Multiple-selection files are a standard feature of HTML5, and we can turn on the multiple-selection mode in the following ways:

Copy Code code as follows:

<form action= "xxx" >
Select images: <input type= "file" Name= "img" Multiple> <!--multiple is the key here! -->
<input type= "Submit" >
</form>

According to a very good jquery plugin jquery-file-upload browser support multiple File selection in this section, IE has been developed to IE10 just beginning to support the characteristics of this HTML5, Then we have to use the magic power of Flash to the lower version of the browser to select multiple pictures support. Luckily Plupload has helped us do this, and the switch is open by default. If you think you don't need to use multiple selections, you can set Multi_selection:false to turn off this feature.

Bypassing the server to upload pictures directly to the cloud

The cloud also provides the HTTP FORM API. Through this interface, we can directly from the browser to launch the upload image request, and do not need to pass through our own server to transit, greatly reducing the cost.

Use the again-photographed HTTP FORM API

With this interface, you need to send a form to another cloud. This form contains the files you want to upload, and you also need to include policy and signature. Policy is used for parameters related to upload requests, such as save paths, file types, preprocessing results, and so on, in addition to the upload request time. And signature is used for security checksums.

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

Copy Code code as follows:

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));
Get form APIs from Upyun user management background
var form_api_secret = ' 1+jy2zqd5uvfw6hq8eesyqo50wo= ';
Calculate signature
var signature = MD5 (policy + ' & ' + Form_api_secret);

Configuration of Plupload

How to make plupload can match the HTTP FORM API of cloud, really let me have a headache. In the view of Plupload's documents, inadvertently found that I saw the dawn, Upload to Amazon S3 this link attracted me. Amazon S3 's full name is the Amazon simple Storage service, which provides a cloud-storage services that are somewhat similar to the cloud-making.

So, based on the introduction to the browser-side configuration in this article, I figured out the configuration needed to upload and shoot the cloud. In fact, it is also very simple, the main is the URL and multipart_params two parameters to configure. The Options.bucket, policy, and signature in the following example directly use the values computed in the previous section.

Copy Code code as follows:

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,
},
...
});

Summarize

And so, finally realized through the Plupload bypass the server, to shoot the cloud bulk upload pictures. Plupload is really a very powerful library, but it can be used for commercial use of the Oh, specifically or to its official online to understand it!

is not very simple, the main idea is very good, it is worth us to learn, have questions please leave a message with me, we progress together