Https://github.com/chaping/plupload_docs this download
Lupload 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 |
Url |
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_ERROR the 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. quality can 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) uploader For the current Plupload instance object
|
Postinit |
triggered when the Init event occurs Listener function Parameters:(uploader) uploader For 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) uploader For 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) uploader For the current Plupload instance object
|
StateChanged |
triggered when the status of the upload queue has changed Listener function Parameters:(uploader) uploader For the current Plupload instance object
|
UploadFile |
triggered when a file in the upload queue starts uploading Listener function Parameters:(uploader,file) uploader As 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) uploader As 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) uploader For the current Plupload instance object
|
Uploadprogress |
is triggered during file uploads and can be used to display upload progress Listener function Parameters:(uploader,file) uploader As 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) uploader For 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) uploader As 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) uploader For 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) uploader For 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) uploader For 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) uploader For 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) uploader For 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) uploader For 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. name is 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
|
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% |
tr> the status of the
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 |
PHP Upload Video