Forums or post bars often need to share a lot of pictures. The poor way to upload pictures is to upload them to the central server, and then forward them to the static image server. This article introduces how to use plupload to optimize the upload process and bypass the server to directly upload pictures in batches to Youpai Cloud. This article will talk about the following key points:
The code copy is as follows:
plupload library
Local compression of pictures
Multiple selection pictures
Bypass the server and upload pictures directly to Youpaiyun
Using the HTTP FORM API
Plupload configuration
plupload library
plupload is a very rich image upload plugin. Low-version browsers can support batch uploads through Flash/Silverlight/html4, while in higher-version browsers, they will be given priority to upload using the html5 interface. All of this is automatic, and it can be said that it is very convenient to use! Secondly, plupload also supports functions such as compressing images on the client and uploading them directly on Drag&Drop. For details, you can learn more about it on its official website.
Here we only use its core API, just introduce a file.
The code copy is as follows:
<script src="lib/plupload-2.1.2/js/plupload.full.min.js"></script>
The core API examples given by the official are very simple, you can directly view them at http://www.plupload.com/examples/core. There are no difficulties in understanding the core API. If you need help, you can ask me a question later in this article.
Local compression of pictures
Generally, the quality of the pictures you browse on web pages is not high. I remember that when I was studying PS in high school, the teacher said that the resolution of the pictures online would be 72, and the printed pictures would have to be 300. Therefore, when users upload a large photo, it is better to use it to compress the image locally on the user's client and upload the compressed smaller picture, which will not affect the browsing effect, but also speed up the upload speed and reduce the burden on the server.
The local compression function of the image is supported in the plupload, just pass in a resize parameter when initializing it. Among them, the width and height can be set according to the actual situation, and quality is a relatively important parameter. As the name suggests, the smaller the value is set, the smaller the picture, but the worse the display quality will be. You need to weigh this yourself.
The code copy is as follows:
{
"resize": {
"width": 200,
"height": 200,
"quality": 70
}
}
Multiple selection pictures
One of the prerequisites for batch uploading of pictures is the ability to select multiple pictures. Multiple-select files are a standard feature of HTML5. We can enable multi-select mode in the following ways:
The code copy is as follows:
<form action="xxx">
Select images: <input type="file" name="img" multiple> <!-- multiple is the key here! -->
<input type="submit">
</form>
According to the section Multiple File selection in the browser support of jQuery-File-Upload, IE has developed until IE10 that it has just begun to support HTML5 features, so we have to use the magic power of Flash to support multiple-select images for lower version browsers. Fortunately, plupload has helped us do this, and this switch is turned on by default. If you think you don't need to use multi-selected images, you can set multi_selection: false to turn off this feature.
Bypass the server and upload pictures directly to Youpaiyun
Youpaiyun provides an HTTP FORM API. Through this interface, we can directly initiate a request to upload images from the browser without having to transfer through our own server, which greatly reduces the overhead.
Using the HTTP FORM API
Using this interface, you need to send a form to Youpaiyun. This form contains the file you want to upload, and also needs to include policy and signature. Policy is used to transfer parameters related to upload requests, such as saving path, file type, preprocessing results, etc., and also includes the upload request grant time, etc. Signature is used for security verification.
For demonstration convenience, we use javascript directly to generate Policy and Signature here. But in actual use, for security reasons, please complete this process on the server side. The following code has been modified based on the official demo, mainly using the official test account. For the specific generation method of these two parameters, please refer to the official document: http://docs.upyun.com/api/form_api/.
The code copy is 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/#Form API Interface Introduction
var policy = window.btoa(JSON.stringify(options));
// Get form API from UPYUN User Management Backend
var form_api_secret = '1+JY2ZqD5UVfw6hQ8EesYQO50Wo=';
// Calculate the signature
var signature = md5(policy + '&' + form_api_secret);
Plupload configuration
How to make plupload work with Youpaiyun's HTTP FORM API really gave me a headache. In the document viewing the plupload, the unexpected discovery made me see the dawn. The link Upload to Amazon S3 attracted me. The full name of Amazon S3 is Amazon Simple Storage Service, and the cloud storage services it provides are more or less similar to those of Youpaiyun.
So based on the introduction to browser configuration in this article, I figured out the configuration required to upload it to Youpaiyun. In fact, it is very simple to say, mainly configuring the two parameters url and multipart_params. The options.bucket, policy and signature in the following examples are directly used to calculate the values in the previous section.
The code copy is 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
In this way, we finally realized that bypassing the server through plupload and uploading pictures in batches to Youpaiyun. Plupload is really a very powerful library, but it can be charged for commercial use. Please go to its official website to learn more!
Isn't it very simple? The main thing is that the idea is very good and worth learning. If you have any questions, please leave me a message and everyone will make progress together