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>