"Go" front-end Upload component Plupload usage guide

Source: Internet
Author: User
Tags silverlight

Http://www.cnblogs.com/2050/p/3913184.html

Plupload has the following features and features:

1, has a variety of upload methods: HTML5, Flash, Silverlight and the traditional <input type= "file"/>. Plupload will automatically detect the current environment, choose the most appropriate way to upload, and will prioritize the use of HTML5. So you don't have to worry about what uploads are supported by your current browser, and Plupload will automatically choose the most appropriate way for you.

2, support drag and drop to select the file to upload

3, support compression in the front of the picture, that is, the picture file has not been uploaded before the compression of it

4, can directly read the original file data, the advantage is such as can be displayed in the picture file before uploading it on the page to preview

5, support the large files to cut into small pieces for uploading, because some browsers for a large number of files such as a few G files can not be uploaded.

Plupload is also used in a very similar way to swfupload, which can be divided into the following steps:

1. Introduction of JS File

2. Instantiate a Plupload object and pass in a configuration parameter object for all aspects of configuration.

3. Call the Init () method of the Plupload instance object to initialize

4. Register the various events you need on the Plupload instance object. Plupload a lot of events will be triggered during the process from selecting files to uploading files. We can use these events to interact with Plupload.

5, realize your own registration of those events of the listener function, using these listening functions to update the UI, prompt upload progress and other work.

We can go to http://chaping.github.io/plupload/demo/to see what I have written about plupload several upload demo.

Here is a piece of code to illustrate how plupload is used.

First, look at my directory structure.

The code for index.html is as follows:

<! DOCTYPE html>

The key to using Plupload is to understand its numerous configuration parameters, events, and properties and methods. I translated the documents from the official website into Chinese and organized the following. I also put it on GitHub, you can go to http://chaping.github.io/plupload/doc/to check it out.

Directory:

First, configuration parameters

Ii. Description of Events

Iii. Properties of Plupload instances

Iv. Methods of Plupload instances

V. Properties and methods of File objects

Vi. Properties of Queueprogress objects

Vii. some properties on the Plupload namespace

First, configuration parameters

When instantiating a Plupload object, that is new plupload.Uploader() , you need to pass in an object as a configuration parameter. The Plupload instances that appear in the following sections refer to new plupload.Uploader() the resulting instance objects

Properties type Default Value Description
Browse_button String/dom The DOM element that triggers the File selection dialog box, when the element is clicked and then the File selection dialog pops up. The value can be either the DOM element object itself or the ID of the DOM element
wr. String The server side receives and processes the script address of the uploaded file, which can be a relative path (as opposed to the document currently called Plupload) or an absolute path
Filters Object { } You can use this parameter to limit the type, size, and so on of an uploaded file, which is passed in as an object, and includes three properties:

mime_types: used to limit the type of upload file, an array, each element of the array is an object, the object has the title and extensions two properties, title is the name of the filter, extensions is the file extension, There are multiple when separated by commas. The property defaults to an empty array, that is, no restrictions.

max_file_size: used to limit the size of the uploaded file, if the file volume exceeds the value, it cannot be selected. The value can be a number, B, or a string, consisting of numbers and units, such as ' 200kb '

prevent_duplicates: whether to allow the selection of duplicate files, true to indicate not allowed, false for allow, default to False. If two files have the same file name and size, they will be considered duplicates.

Filters complete configuration examples are as follows (you can, of course, configure only one of them):

Filters: {  mime_types: [//Only allow uploading of pictures and zip files    {title: "Image Files", Extensions: "Jpg,gif,png"},     {title: "Zi P Files ", Extensions:" Zip "}  ],  max_file_size: ' 400kb ',//MAX upload only 400kb files  prevent_duplicates:true//Not allowed Take duplicate file}
Headers Object Set the custom header information when uploading, in the form of key/value pairs, the key represents the header information property name, the key represents the property value. The Html4 upload method does not support setting this property.
Multipart Boolean True The file is uploaded in true multipart/form-data the form of when it is false, and the file is uploaded in binary format. Html4 Upload method does not support the binary format to upload files, in the Flash upload method, binary upload is also a bit of a problem. and binary format upload also need to do special processing on the server side. Generally, we use the Multipart/form-data form to upload files is enough.
Multipart_params Object Additional parameters at upload, in the form of key/value pairs, the server side uses $_post to get these parameters (in PHP, for example). Like what:
Multipart_params: {  One: ' 1 ', '  2 ',  three: {//The value can also be a literal object    A: ' 4 ',    B: ' 5 '  }, four  : [' 6 ', ' 7 ', ' 8 ']  can also be an array}
Max_retries Number 0 plupload.HTTP_ERRORthe number of retries when an error occurs, 0 means no retry
Chunk_size Number/string 0 When a shard uploads a file, each slice of the file is cut into a size that is a number in bytes. You can also use a string with a unit, such as "200kb" . When this value is 0, it means that the multipart upload feature is not used
Resize Object You can use this parameter to compress the image that will be uploaded, which is an object that contains 5 properties:

Width : Specifies the width of the compressed picture, and defaults to the width of the original picture if the property is not set

Height : Specifies the height of the compressed picture, and defaults to the height of the original picture if the property is not set

crop: whether to crop the picture

quality: compressed image quality, only the JPG format of the image is valid, the default is 90. qualitycan be width used with and with, height but can also be used alone, when used alone, the picture will not change the width after compression, but because the quality is reduced, so the volume will be smaller

preserve_headers: whether to preserve the metadata of the picture after compression, for true retention, false not reserved, default to true . Deleting a picture's metadata can make the picture smaller

The configuration example for the resize parameter is as follows:

Resize: {  width:100,  height:100,  crop:true,  quality:60,  Preserve_headers:false}
Drop_element Dom/string/array Specifies the drag-and-drop area in which you can select files by dragging and dropping them, which is the way to drag and drop files into the area. The value of this parameter can be the ID of a DOM element, or the DOM element itself, or an array that includes multiple DOM elements. If you do not set this parameter, the drag upload feature is not available. Currently only HTML5 upload mode is supported for drag and drop uploads.
Multi_selection Boolean True Whether you can select multiple files in the File Browse dialog box, true to Yes, false to not. By default true, multiple files can be selected. It is important to note that in some environments where multiple files are not supported, the default value is False. For example, in the iOS7 Safari browser, due to the existence of a bug, it is not possible to select multiple files. Of course, in the Html4 upload method, also can not select files.
Required_features Mix You can use this parameter to set some of the features you need, Plupload will choose the appropriate upload method based on your settings. Because, different upload mode, support features are different, such as drag-and-drop upload only HTML5 upload mode support, image compression only html5,flash,silverlight upload mode support. The value of this parameter is a mixed type, which can be a comma-delimited string.
Unique_names Boolean False A value of true will generate a unique file name for each uploaded file, and post it as an additional parameter to the server side, with the parameter specified as the name generated file name.
Runtimes String Html5,flash,
Silverlight
Html4
Used to specify the upload method, specify multiple upload methods, please use commas separated. In general, you do not need to configure this parameter, because the plupload default will choose the most appropriate upload method according to your other parameter configuration. If there is no special requirements, Plupload will first choose HTML5 upload method, if the browser does not support HTML5, then will use Flash or Silverlight, if the previous two also do not support, you will use the most traditional html4 upload method. You can configure this parameter if you want to specify how to use an upload method, or to change the order in which uploads are prioritized.
File_data_name String File Specifies the name of the file field when the file is uploaded, by default file , for example, in PHP you can use $_FILES[‘file‘] to get uploaded file information
Container Dom/string Used to specify the parent container for the HTML structure created by Plupload, which defaults to the browse_button parent element specified earlier. The value of this parameter can be the ID of an element, or it can be the DOM element itself.
Flash_swf_url String js/moxie.swf The URL address of the Flash upload component, if it is a relative path, is relative to the HTML document that calls Plupload. This parameter is used when using the Flash upload method.
Silverlight_xap_url String Js/moxie.xap The URL address of the Silverlight upload component, and if it is a relative path, the relative is the HTML document that calls Plupload. This parameter is used when using the Silverlight upload method.

Ii. Description of Events

To understand the health of plupload, it is in these events

Init
Triggered when Plupload initialization is complete

Listener function Parameters:(uploader)

uploaderFor the current Plupload instance object

Postinit
triggered when the Init event occurs

Listener function Parameters:(uploader)

uploaderFor the current Plupload instance object

Optionchanged
Triggered when the current configuration parameter is changed using the SetOption () method of the Plupload instance

Listener function Parameters:(uploader,option_name,new_value,old_value)

uploaderFor the current Plupload instance object, the changed option_name parameter name for the changed new_value value, the old_value value before the change

Refresh
This event is triggered when the refresh () method of the Plupload instance is called and it is not clear what other actions will trigger the event, but as I test it, the event is also triggered when the file is added to the upload queue.

Listener function Parameters:(uploader)

uploaderFor the current Plupload instance object

StateChanged
triggered when the status of the upload queue has changed

Listener function Parameters:(uploader)

uploaderFor the current Plupload instance object

UploadFile
triggered when a file in the upload queue starts uploading

Listener function Parameters:(uploader,file)

uploaderAs the current Plupload instance object, the file file object that triggers this event

Beforeupload
triggered when a file in the queue is about to start uploading

Listener function Parameters:(uploader,file)

uploaderAs the current Plupload instance object, the file file object that triggers this event

Queuechanged
triggered when the upload queue has changed, that is, the upload queue has added files or removed files. Queuechanged events are triggered before filesadded or filesremoved events

Listener function Parameters:(uploader)

uploaderFor the current Plupload instance object

Uploadprogress
is triggered during file uploads and can be used to display upload progress

Listener function Parameters:(uploader,file)

uploaderAs the current Plupload instance object, the file file object that triggers this event

Filesremoved
Triggered when a file has been removed from the upload queue

Listener function Parameters:(uploader,files)

uploaderFor the current Plupload instance object, files an array of elements that are removed from this event

Filefiltered
It is not clear what the event means, but according to the test, the event is triggered before each file is added to the upload queue

Listener function Parameters:(uploader,file)

uploaderAs the current Plupload instance object, the file file object that triggers this event

filesadded
Triggered when a file is added to the upload queue

Listener function Parameters:(uploader,files)

uploaderFor the current Plupload instance object, files an array of elements that are added to the file object in the upload queue for this time

fileuploaded
triggered when a file in a queue has been uploaded

Listener function Parameters:(uploader,file,responseobject)

uploaderFor the current Plupload instance object, the file information object that is returned by the server for the file object that triggered this event, responseObject which has the following 3 properties:

response: The text returned by the server

responseheaders: header information returned by the server

Status : The HTTP status code returned by the server, such as 200

chunkuploaded
When using the file chip upload function, each small piece upload completes after the trigger

Listener function Parameters:(uploader,file,responseobject)

uploaderFor the current Plupload instance object, the file information object that is returned by the server for the file object that triggered this event, responseObject which has the following 5 properties:

Offset : the size of the file in the overall file offsets

response: The text returned by the server

responseheaders: header information returned by the server

Status : The HTTP status code returned by the server, such as 200

Total : The overall size of the file (that is, the file that was cut into small pieces of files), in bytes

Uploadcomplete
Triggers when all files in the upload queue are uploaded

Listener function Parameters:(uploader,files)

uploaderFor the current Plupload instance object, files an array that contains all the file objects that have been uploaded for this time

Error
Triggered when a trigger occurs

Listener function Parameters:(uploader,errobject)

uploaderFor the current Plupload instance object, the errObject Error object, which contains at least the following 3 properties (properties may be different because of different types of errors):

Code : error code, refer to the constant property of the error code defined on Plupload

File : files object associated with the error

Message: error message

Destroy
triggered when the Destroy method is called

Listener function Parameters:(uploader)

uploaderFor the current Plupload instance object

Iii. Properties of Plupload instances

Properties Description
Id Unique identification ID of the Plupload instance
State The current upload state, the possible value is plupload.STARTED or plupload.STOPPED , the value is controlled by the Plupload instance or by the stop() statr() method. Default isplupload.STOPPED
Runtime The current upload method used
Files The current upload queue, which is an array of file objects in the upload queue
Settings The current configuration Parameter object
Total The Queueprogress object that represents the overall progress information

Iv. Methods of Plupload instances

Method Description
Init () Initializing an Plupload instance
SetOption (option, [value]) Set a specific configuration parameter, option is the parameter name, and value is the parameter value to set. Option can also be an object consisting of a parameter name and an argument value key/value pair, so that multiple parameters can be set at a time, and the second parameter of the method is ignored.
GetOption ([option]) Gets the current configuration parameter, the parameter option is the name of the configuration parameter to get, and if no option is specified, all configuration parameters are obtained
Refresh () Refreshes the current Plupload instance and does not yet understand when to use
Start () Start uploading files in a queue
Stop () Stop file uploads in a queue
Disablebrowse (disable) Disables or enables the Plupload file browse button, which disable is true disabled when the parameter is false enabled. Default istrue
GetFile (ID) Get the file object by ID
AddFile (file, [FileName]) Adds a file to the upload queue and triggers an event if the file is successfully added FilesAdded . The parameter file is the one you want to add, either a native file, or an Plupload file object, or an input[type="file"] element, or an array that includes the preceding things; filename Specifies the name of the file
RemoveFile (file) Remove a file from the upload queue with the parameter file plupload file object or previously specified file name
Splice (start, length) Removes a portion of a file from the upload queue, the return value of the method is the removed file, the index of the file to be removed in the queue, and the start length number of files to remove. The method triggers FilesRemoved  and QueueChanged events
Trigger (name, multiple) Triggers an event. nameis the name of the event to be triggered, the Multiple parameter passed to the listener function for the event, is an object
Haseventlistener (name) Used to determine if an event has a listener function name for the event name
Bind (name, func, scope) An event is bound to a listener function, which is the event name, the Listener function, the scope of the listener function, which is name func scope the point of this in the listener function.
Unbind (name, func) Remove the listener function for the event, name for the event name, func for the listener to remove
Unbindall () Remove all listener functions from all events
Destroy () Destroying Plupload instances

V. Properties and methods of File objects

In many event listener functions, you will be provided with a file object

loaded the size of the uploaded portion of the tr> the status of the
description
ID file ID
Nam e filename, such as "Myfile.gif"
type file type, for example "Image/jpeg"
size file size, in bytes, this value may change after client compression is enabled
origsize The original size of the file, in bytes
file, in bytes
percent the percentage of uploaded portions of the file, such as 50 representing the uploaded 50%
status file, which may be one of the following values: plupload. QUEUED ,   plupload. Uploading ,   plupload. FAILED ,   plupload. Done
lastmodifieddate file Last modified time
getnative () won Take the native file object
getsource () get Moxie.file object, want to know what Moxie is, you can see HTTPS://GITHUB.COM/MOXIECODE/MO Xie/wiki/api
Destroy () destroy file object

Vi. Properties of Queueprogress objects

The total property of the Plupload instance is a Queueprogress object

Properties Description
Size Total size of all files in the upload queue, in bytes
Loaded Total size of the current uploaded file in the queue, in bytes
Uploaded The number of files that have completed uploading
Failed Number of files failed to upload
Queued The number of files that are left in the queue (that is, files that have already been uploaded) that need to be uploaded
Percent The uploaded percentage of the entire queue, such as 50, represents 50%
Bytespersec Upload rate in byte/s, which is bytes per second

Vii. some properties on the Plupload namespace

There are some properties on the Plupload namespace that are used to represent some constants. Remember, not the properties of the Plupload instance, but the properties of the Plupload

Property name Description
VERSION Version number of the current plupload
STOPPED A value of 1, which indicates that the upload queue has not started uploading or the file in the upload queue has been uploaded plupload the attribute value of the instance state
STARTED A value of 2 that represents the property value of the Plupload instance when the file in the queue is being uploaded state
QUEUED A value of 1 indicates that a file has been added to the queue to be uploaded when the property value for the file object status
Uploading A value of 2 that represents the property value of the file object when a file is being uploaded status
FAILED A value of 4 that represents the property value of the file object after a file upload fails status
Done A value of 5 that represents the property value of the file object after a file is successfully uploaded status
Generic_error Value is-100, error code when a generic error occurs
Http_error A value of-200, an error code when an HTTP network error occurs, such as the status code returned by the service gas is not 200
Io_error A value of-300, error code when a disk read and write error occurs, such as a file that is unreadable on the local
Security_error A value of 400, error code when an error occurs because of a security issue
Init_error A value of-500, error code when initialization occurs
File_size_error The value is-600, when the selected file is too large error code
File_extension_error A value of-601, when the selected file type does not meet the requirements of the error code
File_duplicate_error A value of 602, error code when duplicate files are selected and no duplicates are allowed in the configuration
Image_format_error A value of-700, error code when picture format error occurs
Image_memory_error Error code when a memory error occurs
Image_dimensions_error A value of-702, when the file size exceeds the maximum value that plupload can handle, the error code

"Go" front-end Upload component Plupload usage guide

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.