H5上传图片，利用XMLHttpRequest传输数据进度监听不到的解决方法

最新推荐文章于 2021-06-29 17:33:01 发布

weixin_30698527

最新推荐文章于 2021-06-29 17:33:01 发布

阅读量283

点赞数

CC 4.0 BY-SA版权

文章标签：后端

原文链接：http://www.cnblogs.com/AlanYT/p/6959127.html

本文介绍使用XMLHttpRequest实现H5图片上传时如何监听上传进度。解决了在不同设备及浏览器（如Android和IE）上进度监听不一致的问题，并提供了一段示例代码。

今天用H5上传图片，利用XMLHttpRequest对象来传输数据，想在界面上监听上传的进度，出现了IOS机子进度显示正常，而Android机子和IE上都不能监听到，解决办法如下：

 xhr.upload.onprogress = uploading;//上传进度调用方法实现
 xhr.send(form);
 //xhr.upload.addEventListener("progress", uploading, false);//监听不到，换到上面的方法来执行
                  
 function uploading(evt) {
     $preview.find('.weui_uploader_status_content').text(Math.round(evt.loaded / evt.total * 100) + "%");
           if (Math.round(evt.loaded / evt.total * 100) >= 100) {
                $preview.removeClass('weui_uploader_status').find('.weui_uploader_status_content').remove();
           }
     }

转载于:https://www.cnblogs.com/AlanYT/p/6959127.html