ajax 上传文件监听上传进度-白红宇的个人博客

发布日期：2021-05-12 22:17:17 浏览次数：12 分类：原创文章

本文共 1818 字，大约阅读时间需要 6 分钟。

ajax 上传，监听显示上传进度，前端代码如下

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>    </head>    <body>        上传进度:<span id="uploadProgress">0</span>%        <form id="uploadForm" enctype="multipart/form-data">            <input type="file" name="file"/>        </form>        <button id="uploadButton">上传文件</button>        <script>            $("#uploadButton").click(function(){                var formData = new FormData($("#uploadForm")[0]);                $.ajax({                    type:"post",                    url:"http://localhost/third/open/data/file/upload",                    async:true,                    data:formData,                    cache:false,                    processData: false,                    contentType: false,                    xhr: function xhr() {                        //获取原生的xhr对象                        var xhr = $.ajaxSettings.xhr();                        if (xhr.upload) {                            //添加 progress 事件监听                            xhr.upload.addEventListener('progress', function (e) {                                //e.loaded 已上传文件字节数                                //e.total 文件总字节数                                var percentage = parseInt(e.loaded / e.total * 100)                                $("#uploadProgress").html(percentage)                            }, false);                        }                        return xhr;                    },                    success:function(res){                        alert(JSON.stringify(res))                    }                });            });        </script></body></html>

说明：e.loaded 为已上传文件字节数，e.total 为文件总字节数，这里为了显示好看，将其比值转换为整数，读者可根据自己项目需要使用进度条或进度环

后端代码就不列出了，只是一个上传的接口，如想了解，可参考：

运行效果如下图

上一篇：微信小程序构建 npm

下一篇：springboot 项目 pom文件报错 Unknown error

发表评论

关于作者

喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！

-- 愿君每日到此一游！

发表评论

最新留言

关于作者

推荐文章