用jQuery File Upload实现简单的文件上传

{# file_path #}
<div class="form-group">
<label class="control-label col-md-3">
{{ form.file_path.label_tag }}
{% for error in form.file_path.errors %}
<span class="label label-danger">{{ error }}</span>
{% endfor %}
</label>
<div id="upload-drop " class="col-md-6">

<span class="btn btn-success fileinput-button">

<i class="glyphicon glyphicon-plus"></i>

<span>选择上传文件</span>
<input id="fileupload"  name="files[]" type="file" multiple="multiple" data-url="/version/file_upload/">
</span>
<input type="text" class="form-control" id="file_path" name="file_path"  value="" hidden readonly/>
<div class="progress progress-striped active">
<div class="bar progress-bar-success" role="progressbar" style="width: 0%;">0%</div>
</div>
</div>
</div>

$(document).ready(function(){

$('#fileupload').fileupload({
dataType: 'json',
progressall: function (e, data) {
var progress = parseInt(data.loaded / data.total * 100, 10);
$('.progress .bar').css(
'width',
progress + '%'
);
$('.progress .bar').text(progress + '%');
},

done: function(e, data) {
uploadfilename = data.files[0].name
console.log(uploadfilename)
$('.progress .bar').text("上传完成");
$("#file_path").attr("value", uploadfilename);
$("#file_path").attr("hidden", false);
}
});

})