Uploadifive
Demo with HTML5
HTML
<form>
<div id="queue"></div>
<div id="file_upload" name="file_upload" type="file" xxx-multiple="true"></div>
<!--
<input id="file_upload" name="file_upload" type="file" xxx-multiple="true">
<a style="position: relative; top: 8px;" href="javascript:$('#file_upload').uploadifive('upload')">Upload Files</a>
-->
</form>
CSS
#queue {
border: 1px solid #E5E5E5;
height: 100px;
overflow: auto;
margin-bottom: 10px;
padding: 0 3px 3px;
width: 300px;
}
JavaScript
;(function($) {
var methods = {
init : function(options) {
return this.each(function() {
// Create a reference to the jQuery DOM object
var $this = $(this);
$this.data('uploadifive', {
inputs : {}, // The object that contains all the file inputs
inputCount : 0, // The total number of file inputs created
fileID : 0,
queue : {
count : 0, // Total number of files in the queue
selected : 0, // Number of files selected in the last select operation
replaced : 0, // Number of files replaced in the last select operation
errors : 0, // Number of files that returned an error in the last select operation
queued : 0, // Number of files added to the queue in the last select operation
cancelled : 0 // Total number of files that have been cancelled or removed from the queue
},
uploads : {
current : 0, // Number of files currently being uploaded
attempts : 0, // Number of file uploads attempted in the last upload operation
successful : 0, // Number of files successfully uploaded in the last upload operation
errors : 0, // Number of files returning errors in the last upload operation
count : 0 // Total number of files uploaded successfully
}
});
var $data =...