jQuery file upload实现异步文件上传（带进度条）

来源：互联网发布：电脑屏幕控制软件编辑：程序博客网时间：2024/04/29 10:18

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>

2 2