Home Web Front-end JS Tutorial Use JS plupload to directly upload images in batches to Youpai Cloud_javascript skills

Use JS plupload to directly upload images in batches to Youpai Cloud_javascript skills

May 16, 2016 pm 04:29 PM
js Shoot the clouds again

Forums or post bars often need to share a lot of pictures. The worse way to upload pictures is to upload them to a central server, and then the central server forwards them to the static picture server. This article will introduce how to use plupload to optimize the upload process and directly upload images in batches to Youpai Cloud, bypassing the server. This article will focus on the following key points:

Copy code The code is as follows:

plupload library
Local compression of images
Multiple selection of pictures
Bypass the server and directly upload pictures in batches to Youpai Cloud
Use Youpai’s HTTP FORM API
plupload configuration

plupload library

plupload is a very rich image upload plug-in. Batch uploads can be supported through Flash/Silverligh/html4 for lower version browsers, while for higher version browsers, the HTML5 interface will be used first for uploading. All these determinations are automatic, and it can be said to be very convenient to use! Secondly, plupload also supports functions such as compressing images on the client and directly Drag&Drop for uploading. For more information, you can go to its official website.

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

Copy code The code is as follows:


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

Local compression of images

Generally, the quality of pictures viewed on the web is not high. I remember when I was learning PS in high school, the teacher said that the resolution of online pictures should be set to 72, and for printed pictures, it should be set to 300. Therefore, when a user uploads a large photo, a better approach is for the user's client to compress the image locally and upload the compressed smaller image, which does not affect the browsing effect and can also speed up the upload. speed, reducing the burden on the server.

The local compression function of images is supported in 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 more important parameter. As the name suggests, the smaller the value is set, the smaller the picture will be, but the display quality will be worse. You need to weigh this yourself. .

Copy code The code is as follows:

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

Multiple selection of pictures

A prerequisite for batch uploading images is the ability to select multiple images. Multi-selection files are a standard feature of HTML5. We can enable multi-selection mode in the following ways:

Copy code The code is as follows:


Select images:


According to the section Multiple File selection in the browser support of a very excellent jquery plug-in jQuery-File-Upload, IE has only just begun to support this HTML5 feature until IE10, so we have to use Flash The magical power to support multiple image selection in lower version browsers. Fortunately, plupload has already done this for us, and this switch is enabled by default. If you feel you don't need to use multi-selection images, you can set multi_selection: false to turn off this feature.

Bypass the server and directly upload pictures in batches to Youpai Cloud

Youpaiyun provides HTTP FORM API. Through this interface, we can directly initiate a request to upload images from the browser without having to go through our own server, which greatly reduces the overhead.

Use Youpai’s HTTP FORM API

To use this interface, you need to send a form to Youpaiyun. This form contains the files you want to upload, and also needs to include policy and signature. Policy is used to set upload request-related parameters, such as storage path, file type, preprocessing results, etc. In addition, it also includes the upload request grant time, etc. Signature is used for security verification.

For the convenience of demonstration, javascript is used directly to generate Policy and Signature. But in actual use, for security reasons, please complete this process on the server side. The following code has been slightly 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 documentation: http://docs.upyun. com/api/form_api/.

Copy code The code is as follows:

var options = {
'bucket': 'demonstration',
'save-key': '/test/filename.txt',
'expiration': Math.floor(new Date().getTime() / 1000) 86400
};
// View 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 background
var form_api_secret = '1 JY2ZqD5UVfw6hQ8EesYQO50Wo=';
// Calculate signature
var signature = md5(policy '&' form_api_secret);

plupload configuration

How to make plupload work with Youpaiyun's HTTP FORM API really gives me a headache. While looking at the documentation of plupload, I accidentally discovered that the link to Upload to Amazon S3 attracted me. The full name of Amazon S3 is Amazon Simple Storage Service. The cloud storage service it provides is more or less similar to Youpaiyun.

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

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

Summary

In this way, I finally achieved the ability to bypass the server through plupload and upload images in batches to Youpai Cloud. plupload is really a very powerful library, but it does require a fee for commercial use. Please go to its official website to learn more!

Isn’t it very simple? The main reason is that the idea is very good and worth learning. If you have any questions, please leave a message with me and we can make progress together

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Best Graphic Settings
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. How to Fix Audio if You Can't Hear Anyone
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: How To Unlock Everything In MyRise
1 months ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

How to use JS and Baidu Maps to implement map pan function How to use JS and Baidu Maps to implement map pan function Nov 21, 2023 am 10:00 AM

How to use JS and Baidu Map to implement map pan function Baidu Map is a widely used map service platform, which is often used in web development to display geographical information, positioning and other functions. This article will introduce how to use JS and Baidu Map API to implement the map pan function, and provide specific code examples. 1. Preparation Before using Baidu Map API, you first need to apply for a developer account on Baidu Map Open Platform (http://lbsyun.baidu.com/) and create an application. Creation completed

Recommended: Excellent JS open source face detection and recognition project Recommended: Excellent JS open source face detection and recognition project Apr 03, 2024 am 11:55 AM

Face detection and recognition technology is already a relatively mature and widely used technology. Currently, the most widely used Internet application language is JS. Implementing face detection and recognition on the Web front-end has advantages and disadvantages compared to back-end face recognition. Advantages include reducing network interaction and real-time recognition, which greatly shortens user waiting time and improves user experience; disadvantages include: being limited by model size, the accuracy is also limited. How to use js to implement face detection on the web? In order to implement face recognition on the Web, you need to be familiar with related programming languages ​​and technologies, such as JavaScript, HTML, CSS, WebRTC, etc. At the same time, you also need to master relevant computer vision and artificial intelligence technologies. It is worth noting that due to the design of the Web side

Essential tools for stock analysis: Learn the steps to draw candle charts with PHP and JS Essential tools for stock analysis: Learn the steps to draw candle charts with PHP and JS Dec 17, 2023 pm 06:55 PM

Essential tools for stock analysis: Learn the steps to draw candle charts in PHP and JS. Specific code examples are required. With the rapid development of the Internet and technology, stock trading has become one of the important ways for many investors. Stock analysis is an important part of investor decision-making, and candle charts are widely used in technical analysis. Learning how to draw candle charts using PHP and JS will provide investors with more intuitive information to help them make better decisions. A candlestick chart is a technical chart that displays stock prices in the form of candlesticks. It shows the stock price

How to create a stock candlestick chart using PHP and JS How to create a stock candlestick chart using PHP and JS Dec 17, 2023 am 08:08 AM

How to use PHP and JS to create a stock candle chart. A stock candle chart is a common technical analysis graphic in the stock market. It helps investors understand stocks more intuitively by drawing data such as the opening price, closing price, highest price and lowest price of the stock. price fluctuations. This article will teach you how to create stock candle charts using PHP and JS, with specific code examples. 1. Preparation Before starting, we need to prepare the following environment: 1. A server running PHP 2. A browser that supports HTML5 and Canvas 3

How to use JS and Baidu Map to implement map click event processing function How to use JS and Baidu Map to implement map click event processing function Nov 21, 2023 am 11:11 AM

Overview of how to use JS and Baidu Maps to implement map click event processing: In web development, it is often necessary to use map functions to display geographical location and geographical information. Click event processing on the map is a commonly used and important part of the map function. This article will introduce how to use JS and Baidu Map API to implement the click event processing function of the map, and give specific code examples. Steps: Import the API file of Baidu Map. First, import the file of Baidu Map API in the HTML file. This can be achieved through the following code:

How to use JS and Baidu Maps to implement map heat map function How to use JS and Baidu Maps to implement map heat map function Nov 21, 2023 am 09:33 AM

How to use JS and Baidu Maps to implement the map heat map function Introduction: With the rapid development of the Internet and mobile devices, maps have become a common application scenario. As a visual display method, heat maps can help us understand the distribution of data more intuitively. This article will introduce how to use JS and Baidu Map API to implement the map heat map function, and provide specific code examples. Preparation work: Before starting, you need to prepare the following items: a Baidu developer account, create an application, and obtain the corresponding AP

PHP and JS Development Tips: Master the Method of Drawing Stock Candle Charts PHP and JS Development Tips: Master the Method of Drawing Stock Candle Charts Dec 18, 2023 pm 03:39 PM

With the rapid development of Internet finance, stock investment has become the choice of more and more people. In stock trading, candle charts are a commonly used technical analysis method. It can show the changing trend of stock prices and help investors make more accurate decisions. This article will introduce the development skills of PHP and JS, lead readers to understand how to draw stock candle charts, and provide specific code examples. 1. Understanding Stock Candle Charts Before introducing how to draw stock candle charts, we first need to understand what a candle chart is. Candlestick charts were developed by the Japanese

How to use JS and Baidu Maps to implement map polygon drawing function How to use JS and Baidu Maps to implement map polygon drawing function Nov 21, 2023 am 10:53 AM

How to use JS and Baidu Maps to implement map polygon drawing function. In modern web development, map applications have become one of the common functions. Drawing polygons on the map can help us mark specific areas for users to view and analyze. This article will introduce how to use JS and Baidu Map API to implement map polygon drawing function, and provide specific code examples. First, we need to introduce Baidu Map API. You can use the following code to import the JavaScript of Baidu Map API in an HTML file

See all articles