JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://blueimp.github.com/cdn/css/bootstrap.min.css">
<link rel="stylesheet" href="http://blueimp.github.com/cdn/css/bootstrap-responsive.min.css">
<link rel="stylesheet" href="http://blueimp.github.io/jQuery-File-Upload/css/jquery.fileupload-ui.css">
<script src="http://blueimp.github.io/jQuery-File-Upload/js/jquery.iframe-transport.js"></script>
<script src="http://blueimp.github.io/jQuery-File-Upload/js/jquery.fileupload.js"></script>
<div class="span3">
<label>Attachment</label>
<div class="file-upload">
<span class="btn btn-inverse fileinput-button">
<span>Select File</span>
<input type="text" buttontext="Select File" class="resultUpload span12" value="" id="attachment" name="attachment"/>
</span>
<br/>
<br/>
<!-- The global progress bar -->
<div class="progress progress-success progress-striped">
<div class="bar"></div>
</div>
</div>
JavaScript
$(function () {
'use strict';
$(".resultUpload").each(function () {
$(this).fileupload({
url: '/results/upload-ajax',
formData: {
//staff
},
dataType: 'json',
maxFileSize: 10000000, // 10 MB
paramName: 'fileupload',
basic: true,
maxNumberOfFiles: 1,
done: function (e, data) {
console.log('done');
//staff
},
progressall: function (e, data) {
console.log('progressall');
//staff
},
fail: function (e, data) {
console.log('fail');
//staff
}
});
});
});