FORM中的代码：
{# 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>
js实现：
$(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);
}
});
})
uqjs效果：
