Upload Image js Plugin plupload

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.

Here's the demo I wrote myself.

<p>
<button id= "Browse" > select File </button>
<button id= "Start_upload" > Start uploading </button>
</p>
<script>

Instantiate an Plupload upload object
var uploader = new Plupload. Uploader ({
Runtimes: ' HTML5,FLASH,SILVERLIGHT,HTML4 ',//allowed upload mode
Browse_button: ' Browse ',//Trigger File Selection Dialog button, for that element ID
Container:document.getElementById (' Upload-box ')//button outside Div ID
Container: ' container ',//This is the address of the container,
Max_file_size: ' 10MB ',//This is the maximum upload size of the file and must be used in conjunction with IIS
URL: '/xxx ',//server-side upload page address
Flash_swf_url: ' js/moxie.swf ',//swf file, you need to configure this parameter when you need to upload using SWF mode
Silverlight_xap_url: ' js/moxie.xap '//silverlight file, you need to configure this parameter when you need to upload using Silverlight mode
File_data_name: ' Imgfile ',//form name
Filters: {
Max_file_size: ' 10MB ',//maximum file size
Mime_types: [
{title: "Image Files", Extensions: "Jpg,jpeg,gif,png"},//define the image styles that can be uploaded
]
},
});

The init () method is called on the instance object to initialize
Uploader.init ();

Bind various events and do what you want to do in the event listener function
Uploader.bind (' filesadded ', function (up,files) {
Each event listener function will pass in some useful parameters,
We can use the information provided by these parameters to do such things as updating the UI, prompting the upload progress, etc.

When a file is added, a list of files to be uploaded is displayed in the container
for (var i in files) {$ (' filelist '). InnerHTML + = ' + Files[i].name + ' (' + plupload.formatsize (files[i].size) + ') ';}
});
Uploader.bind (' uploadprogress ', function (uploader,file) {
Each event listener function will pass in some useful parameters,
We can use the information provided by these parameters to do such things as updating the UI, prompting the upload progress, etc.

File Upload Progress
document.getElementById (file.id). getElementsByTagName (' B ') [0].innerhtml = ' <span> ' + file.percent + '%</ Span> ";
});
//......
//......

Finally register the event with the "Start upload" button
document.getElementById (' Start_upload '). onclick = function () {
Uploader.start (); Call the Start () method of the instance object to start uploading the file, and of course you can call the method elsewhere
}

</script>

Refer to: http://www.cnblogs.com/2050/p/3913184.html

Http://www.cnblogs.com/luckybird/archive/2013/01/15/2861072.html

Upload Image js Plugin plupload