Free HTML5 uploadify

I believe many of you have used uploadify, a file upload plug-in. It supports multi-file selection, display progress bars, and high configuration. It is quite useful in general. The official website has two versions for download: flash and HTML5. Unfortunately, HTML5 is charged. When have you spent so many years using software! Adhering to our excellent tradition, I decided to implement an HTML5 version based on its API. After some hard work, we finally covered most of the APIs and were able to meet the basic file upload requirements. The following is the default configuration in the plug-in: copy the code var defaults = {fileTypeExts: '', // type of file to be uploaded, in the format '*. jpg ;*. doc 'uploader: '', // address for file submission: auto: false, // whether to enable automatic upload method: 'post', // The request sending method, get or post multi: true, // whether multiple files can be selected formData: null, // parameters sent to the server, format: {key1: value1, key2: value2} fileObjName: 'file', // The parameter name of the file accepted at the backend, such as $ _ FILES ['file'] fileSizeLimit: 2048 in PHP, // the size of the file to be uploaded, unit: KB showUploadedPercent: true, // whether to display the upload percentage in real time, such as 20% showUploadedSize: false, // whether to display the size of the uploaded file in real time, such as 1 M/2 M buttonText: 'select file', // The removeTimeout: 1000 text on the upload button, // The time when the progress bar disappears after the upload is complete, in milliseconds itemTemplate: itemTemp, // The onUploadStart: null template displayed in the upload queue, // onUploadSuccess: null, // onUploadComplete: null, // onUploadError: null, // The Upload Failed action onInit: null, // The initialization action onCancel: null // Delete the callback function after a file, you can input the file parameter}. The copied Code has the following features: multi-File Upload display progress bar shows the size and percentage of uploaded files file extensions and file size detection to the server submitted additional data custom file queue in the html template css style separation of individual files, you can customize the style to add the callback function usage for each stage of File Upload. First, a container is required on the page, usually a div, such: <div id = "upload"> </div>: copy the code $ ('# upload '). huploadify ({auto: true, fileTypeExts :'*. jpg ;*. png ;*. exe ', multi: true, formData: {key: 123456, key2: 'vvvv'}, fileSizeLimit: 1024, showUploadedPercent: true, showUploadedSize: true, removeTimeout: 9999999, uploader: 'upload. php', onUploadStart: function () {console. log ('start upload');}, onInit: function () {console. log ('initialization');}, onUploadComplete: function () {console. log ('upload completed ');}, onCancel: function (file) {console. log (file );}});