Plupload File Upload Plugin

A resource document

Two basic use

Three possible problems

A resource document

Git repository Address: https://github.com/moxiecode/plupload

A Chinese quick check: http://www.cnblogs.com/2050/p/3913184.html

Demo:http://chaping.github.io/plupload/demo/index.html that may be useful

Two basic use

Html:

<ulID= "FileList"></ul><BR/><DivID= "Container">    <aID= "Browse"href= "javascript:;">[Browse ...]</a>     <aID= "Start-upload"href= "javascript:;">[Start Upload]</a></Div><BR/><PreID= "Console"></Pre>

Js:

<script type= "Text/javascript" >varuploader =NewPlupload. Uploader ({browse_button:' Browse ', URL:' upload.php '}); Uploader.init (); Uploader.bind (' Filesadded ',function(up, files) {varhtml = ' '; Plupload.each (Files,function(file) {HTML+ = ' <li id= ' + file.id + ' "> ' + file.name + ' (' + plupload.formatsize (file.size) + ') &LT;B&GT;&LT;/B&GT;&LT;/LI&G t; ';    }); document.getElementById (' FileList '). InnerHTML + =html;}); Uploader.bind (' Uploadprogress ',function(up, file) {document.getElementById (file.id). getElementsByTagName (' B ') [0].innerhtml = ' <span> ' + file.percent + "%</span>";}); Uploader.bind (' Error ',function(up, err) {document.getElementById (' Console '). InnerHTML + = "\nerror #" + Err.code + ":" +err.message;}); document.getElementById (' Start-upload '). onclick =function() {Uploader.start ();};</script>

The main is to use the options configuration parameters, using the built-in functions to add methods, using the Init () method to initialize the uploader.

1 Options (Configuration parameters)

Only two option is required: Browse_button and URL, and the rest is optional.

The Browse_button can be either the DOM element itself or its ID.

The URL is the server-side FileUpload handler

2 events (various incidents)

Common events:

Init: Triggered when plupload initialization is complete

Postinit: Triggered when the Init event occurs

Filesadded: Triggered when a file is added to the upload queue

Fileuploaded: Triggered when a file in the queue has been uploaded

Uploadcomplete: Triggers when all files in the upload queue are uploaded

Error: Triggered when a fault occurs

可以根据error code捕捉到各种错误，各种错误码在plupload命名空间上的一些属性都can be found.

3 Properties (plupload instance properties)

Common Properties:

Unique ID of the Id:uploader instance

State: The current status of the entire upload, which may be plupload. STARTED or Plupload. STOPPED. Can be controlled by the Stop/start method. The default value value is stopped.

Files: The current upload queue, which is an array of file instances.

Total: The overall upload progress information. Including how many files have been uploaded completed, progress percentage etc.

4 Methods (Plupload instance method)

Common methods:

Init ()

Initializes the uploader instance and adds an internal event listener function.

Start ()

Start uploading queue files

Stop ()

Stop uploading a queue file

5 Properties and methods for file objects

In many event listener functions, a file object is provided. where filesadded,filesremoved and uploadcomplete provide an array of file objects, because plupload allows multiple files to be selected at the same time. The properties of a file object include name (filename), type (file type), size (file size, and so on), status (file status, and so on). The file method includes getnative () (Gets the native file object), GetSource () (Gets the Moxie.file object), about Omoxie, which is described later.

6 plupload命名空间上的一些属性

is primarily the status property of the file object, the State property of the Plupload instance, and the error code for various errors

1) state:stopped (1), STARTED (2)

2) status:queued (1), uploading (2), FAILED (4), Done, (5)

3) Error code:

Http_error (-200): When an HTTP network error occurs

File_size_error (-600): When the selected file is too large

File_extension_error (-601); When the selected file type does not meet the requirements

File_duplicate_error (-602); When duplicate files are selected and duplicate files are not allowed in the configuration

Image_dimensions_error (-702): When the file size exceeds the maximum value that plupload can handle

Three possible problems

1 关于ie9 runtimes

Plupload is a multi-runtime file upload API.

The default value for Runtimes is: "Html5,flash,silverlight,html4". Can be configured in options.

In general, you do not need to configure this parameter because Plupload defaults to choosing the most appropriate upload method based on 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.

In IE9 browser, not support Flash, need to use Omxie Polyfill, with the help of moxie.swf. You need to configure two Option:flash_swf_url and Silverlight_xap_url in the options. corresponding to the URL address of the Flash upload component and the URL address of the Silverlight upload component, if it is a relative path, it is relative to the HTML document that calls Plupload.

When the moxie.swf file is not found, runtimes fallback to HTML4. The following two are the cases where the files are not found and the files are found, the Moxie-shim class will be different. When the IE9 appears moxie-shim-html4, usually do not find moxie.swf file, there will be some compatibility issues IE9, such as the Browse image button is not good click or front-end preview picture can not display problems.

About OMXIE:HTTPS://GITHUB.COM/MOXIECODE/MOXIE/WIKI/API

2关于flash跨域请求

Launching HTTP requests for external Web site resources in Flash can cause cross-domain issues with flash.

When a cross-domain issue occurs, flash accesses the crossdomain.xml file of the other site's root directory first.

Crossdomain.xml files can define which sites have access to resources on this site.

So if we want to allow other sites to access our resources across domains, we need to add the Crossdomain.xml file to the root directory.

<?xml version= "1.0"?>

<cross-domain-policy>

<allow-access-from domain= "wuage.com"/>

</cross-domain-policy>

The configuration is straightforward, and domain represents the domain name that is allowed to access.

Plupload File Upload Plugin