Use plupload to bypass the server and batch upload images to youpai cloud,

Use plupload to bypass the server and batch upload images to youpai cloud,

This article was originally published on my personal blog: Jerry's paradise

Summary

Forums or post bars often need to share a lot of images. The poor way to upload images is to upload them to the central server, and then the central server forwards them to the static image server. This article describes how to use plupload to optimize the upload process, and how to directly upload images to the cloud in batches without bypassing the server. I wrote a Demo:

• Plupload Library
• Local Image Compression
• Select multiple images
• Directly upload images to youpai cloud in batches without bypassing the server
  • Use youpai HTTP FORM API
  • Plupload Configuration

Plupload Library

Plupload is a rich Image Upload plug-in. You can useFlash/Silverligh/html4Batch upload is supported. In advanced browsers, batch upload is preferred.Html5Interface upload. All these judgments are automatic and can be said to be very convenient to use! Second, plupload also supportsClient compression image, direct Drag & DropFor upload and other functions, you can go to its official website to learn more.

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

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

The official core API example is very simple. You can directly go to http://www.plupload.com/examples/core.pdf. There is no difficulty in understanding core APIs. If you need help, you can ask me questions after this article.

Local Image Compression

Generally, the quality of images browsed on the Web page is not high. I remember that I learned the PS in high school. The teacher said that the image resolution on the Internet would be set to 72, and the printed image would be set to 300. Therefore, when you upload a large photo, it is better to compress the image locally on your client and upload the smaller image after compression, it does not affect the browsing effect, but also accelerates the upload speed and reduces the burden on the server.

The local compression function of the image is supported in plupload, as long as you inputresizeThe parameter is enough. The width and height can be set according to the actual situation, whilequalityIt is an important parameter. As the name suggests, the smaller the value, the smaller the image, but the worse the quality of the display, You need to weigh it yourself.

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

Select multiple images

A precondition for uploading images in batches is that you can select multiple images. Multiple-choice files are a standard feature of HTML5. You can enable the multiple-choice mode in the following ways:

<Form action = "xxx"> Select images: <input type = "file" name = "img" multiple> <! -- Multiple is the key here! --> <Input type = "submit"> </form>

According to the support of a very good jquery plug-in jQuery-File-Upload browserMultiple File selectionAs written in this section, IE has been evolvingIE10As we have just begun to support this HTML5 feature, we have to use the magical power of Flash to support multi-choice images for low-version browsers. Fortunately, plupload has helped us achieve this, and this switch is enabled by default. If you don't think you need to use multiple images, you can setmulti_selection: falseTo disable this feature.

Directly upload images to youpai cloud in batches without bypassing the server

Upyun provides http form APIs. Through this interface, we can directly initiate a request to upload images from the browser, without the need to transfer images through our own server, greatly reducing the overhead.

Use youpai HTTP FORM API

To use this interface, you need to send a form to upyun. This form contains the file you want to upload and must containpolicyAndsignature. Policy is used to specify parameters related to the upload request, such as the storage path, file type, and pre-processing result. In addition, it also includes the upload request duration. Signature is used for security verification.

For ease of demonstration, javascript is directly used to generate Policy and Signature.But in actual use, please complete this process on the server side for security considerations.The following code has been slightly modified based on the official demo, mainly using the official test account. For details about how to generate these two parameters, refer to the official documentation: http://docs.upyun.com/api/form_api /.

Var options = {'bucket': 'Demo', 'Save-key': '/test/filename.txt', 'expiration': Math. floor (new Date (). getTime ()/1000) + 86400}; // view more parameters: http://docs.upyun.com/api/form_api/#table single apiinterface VaR policy = window. btoa (JSON. stringify (options); // obtain the form APIvar form_api_secret = '1 + JY2ZqD5UVfw6hQ8EesYQO50Wo = 'from the UPYUN user management background '; // calculate the signature var signature = md5 (policy + '&' + form_api_secret );

Plupload Configuration

How to Make plupload work with the http form api of upyun really makes me a headache. When I checked the plupload document, I accidentally found that the link from Upload to Amazon S3 attracted me.Amazon S3The full name is Amazon Simple Storage Service, which provides cloud Storage services more or less similar to upyun.

According to the introduction of browser configuration in this article, I figured out the configuration required for uploading to youpai cloud. In fact, it is also very simple, mainlyurlAndmultipart_paramsConfigure two parameters. In the following exampleoptions.bucket,policyAndsignatureDirectly use the value calculated in the previous section.

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

Summary

In this way, we finally achieved the use of plupload to bypass the server and batch upload images to youpai cloud. Plupload is a very powerful library, but it can charge for commercial use. Go to its official website to learn more! Although I have already mentioned it at the beginning, here I am still nagging: The final demo effect can be seen in the project I created, leaving the link: http://zry656565.github.io/bulk-upload-to-UPYUN/

References

• Youpai cloud documentation-HTTP FORM API
• Upyun official js call demo
• Plupload-Upload to Amazon S3
• Plupload-plupload ignores server side error messages