Shulou(Shulou.com)06/02 Report--

This article shows you the principle of the front-end upload component plupload and how to use it, the content is concise and easy to understand, it can definitely brighten your eyes. I hope you can get something through the detailed introduction of this article.

A main page in which an iframe page is wrapped. In the project, this iframe page is wrapped in the div tag of the main page and is mainly used to upload file attachments. Using the plupload.full plug-in.

Plupload has the following functions and features:

1. There are a variety of upload methods: HTML5, flash, silverlight and traditional. Plupload will automatically detect the current environment, choose the most appropriate upload method, and will give priority to the use of HTML5. So you don't have to worry about which upload methods your current browser supports. Plupload will automatically choose the most appropriate one for you.

2. Support dragging and dropping to select files to be uploaded

3. Support compressing the picture at the front end, that is, compressing the picture file before it is uploaded.

4. You can read the original file data directly. The advantage is that you can preview the image file on the page before it is uploaded, for example.

5. Support to cut large files into small pieces for upload, because some browsers cannot upload large files such as a few gigabytes.

The use of Plupload can be divided into the following steps:

1. Introduce the js file, and download the source file of plupload.

2. Instantiate a plupload object and pass in a configuration parameter object to configure all aspects.

3. Call the init () method of the plupload instance object for initialization

4. Register all kinds of events you need on the plupload instance object. Plupload triggers a lot of events during the process from file selection to file upload. We can interact with plupload through these events.

5, implement your own registered listening functions for those events, and use these listening functions to update UI, prompt upload progress and other work.

Select a file

Start uploading

/ / instantiate an plupload upload object

VarfileName= ""

Varuploader=newplupload.Uploader ({/ / instantiate a plupload upload object

Browse_button:'browse'

File_data_name:'imgFile',// specifies the name of the file domain when the file is uploaded

The above is the principle of the front-end upload component plupload and how to use it. Have you learned the knowledge or skills? If you want to learn more skills or enrich your knowledge reserve, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.