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

最新推荐文章于 2024-09-29 13:21:02 发布

wangtaoking1

最新推荐文章于 2024-09-29 13:21:02 发布

阅读量2.3w

点赞数 2

分类专栏：前端开发文章标签： jquery

本文链接：https://blog.csdn.net/wangtaoking1/article/details/50719160

版权

前端开发专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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>