"Go" front-end Upload component Plupload usage guide

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