版权声明：本文为博主原创文章，转载请注明出处。 https://blog.csdn.net/wangtaoking1/article/details/50719160
jQuery file upload是jQuery的一个插件，功能也挺强大，使用的人还是非常多的，这里记录一下这个插件的使用方法。
下载地址：https://github.com/blueimp/jQuery-File-Upload
将js文件夹中的jquery.fileupload.js，jquery.iframe-transport.js，vendor/jquery.ui.widget.js这三个文件拷到自己的项目中的相应位置，缺一不可。
完整代码如下：
<html>
<head>
<title>test</title>
<meta charset="utf-8">
<link href="{% static 'website/css/bootstrap.min.css' %}" rel="stylesheet">
<script src="{% static 'website/js/jquery-2.1.4.min.js' %}"></script>
<script src="{% static 'website/js/bootstrap.min.js' %}"></script>
<script src="{% static 'website/js/jquery.ui.widget.js' %}"></script>
<script src="{% static 'website/js/jquery.iframe-transport.js' %}"></script>
<script src="{% static 'website/js/jquery.fileupload.js' %}"></script>
</head>
<body>
<input id="fileupload" type="file" name="file" data-url="upload_url">
<div class="progress progress-striped active">
<div class="progress-bar progress-bar-success" role="progressbar" style="width: 0%;">0%</div>
</div>
<script>
$(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) {
$('.progress .bar').text("done");
}
});
});
</script>
</body>
</html>