使用原生JS 或jquery ajax 获取上传图片实时进度

PingCAP 发布于2019-08-22 13:52 / 2448人阅读

话不多说直接上代码

jquery 版

    $.ajax({
        url: "URL",
        type: "POST",
        data: fd,
        processData: false, //用来回避jquery对formdata的默认序列化，XMLHttpRequest会对其进行正确处理  
        contentType: false, //设为false才会获得正确的conten-Type  
        xhr: function() { //用以显示上传进度  
            var xhr = $.ajaxSettings.xhr();
            if (xhr.upload) {
                xhr.upload.addEventListener("progress", function(event) {
                    var percent = Math.floor(event.loaded / event.total * 100);
                    document.querySelector("#progress .progress-item").style.width = percent + "%";
                }, false);
            }
            return xhr
        },
        success: function(data) {

        }
    })

原生js版

var xhr = new XMLHttpRequest();
    xhr.open("POST", "url");
    // 上传完成后的回调函数
    xhr.onreadystatechange = function() {
        if (xhr.status === 200) {　　
            console.log(xhr.responseText);
        } else {　
            console.log("上传出错");
        }
    };
    // 获取上传进度
    xhr.upload.onprogress = function(event) {
        console.log(event.loaded)
        console.log(event.total)
        if (event.lengthComputable) {
            var percent = Math.floor(event.loaded / event.total * 100);
            document.querySelector("#progress .progress-item").style.width = percent + "%";
            // 设置进度显示
            console.log(percent)
        }
    };
    xhr.send(fd);

html 和相关进度条css

    #progress {
        height: 10px;
        width: 300px;
        border: 1px solid gold;
        position: relative;
        border-radius: 5px;
    }
    
    #progress .progress-item {
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        background: chartreuse;
        border-radius: 5px;
        transition: width .3s linear;
    }

大字表示注意,网速快了看到的进度条是一瞬间完成，打印的percent也都是100，如果要看比较明显的效果可以把控制台的模拟网速调成slow 3G,就能看到比较明显的效果。

有任何问题下方留言

云服务器 GPU云服务器 ajax上传进度条 ajax原生js实现原生js封装ajax 原生js实现ajax

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/92542.html

javascript功能插件大集合前端常用插件 js常用插件

摘要：转载来源包管理器管理着库，并提供读取和打包它们的工具。能构建更好应用的客户端包管理器。一个整合和的最佳思想，使开发者能快速方便地组织和编写前端代码的下一代包管理器。很棒的组件集合。隐秘地使用和用户数据。转载来源：https://github.com/jobbole/aw... 包管理器管理着 javascript 库，并提供读取和打包它们的工具。•npm – npm 是 javasc...

netmou 2019-08-23 12:28 评论0 收藏0
javascript功能插件大集合前端常用插件 js常用插件

摘要：转载来源包管理器管理着库，并提供读取和打包它们的工具。能构建更好应用的客户端包管理器。一个整合和的最佳思想，使开发者能快速方便地组织和编写前端代码的下一代包管理器。很棒的组件集合。隐秘地使用和用户数据。转载来源：https://github.com/jobbole/aw... 包管理器管理着 javascript 库，并提供读取和打包它们的工具。•npm – npm 是 javasc...

Hydrogen 2019-08-02 11:46 评论0 收藏0
javascript功能插件大集合，写前端的亲们记得收藏

摘要：一个专注于浏览器端和兼容的包管理器。一个整合和的最佳思想，使开发者能快速方便地组织和编写前端代码的下一代包管理器。完全插件化的工具，能在中识别和记录模式。健壮的优雅且功能丰富的模板引擎。完整的经过充分测试和记录数据结构的库。【导读】：GitHub 上有一个 Awesome – XXX 系列的资源整理。awesome-javascript 是 sorrycc 发起维护的 JS 资源列表...

cfanr 2019-08-20 10:34 评论0 收藏0
JavaScript 资源大全中文版

摘要：官网全新的静态包管理器。官网一个整合和官网的最佳思想，使开发者能快速方便地组织和编写前端代码的下一代包管理器。官网小巧的兼容的所见即所得的富文本编辑器。官网富文本编辑器。官网由制作，适用于每天写作的富文本编辑器。 1. 包管理器管理着 javascript 库，并提供读取和打包它们的工具。 npm：npm 是 javascript 的包管理器。官网 cnpm：cnpm 是由于国...

jzman 2019-08-23 17:18 评论0 收藏0
文件上传进度提示

摘要：需求当上传的文件相对较大时，用户可能需要等待较长的时间，这个时候前端如果没有任何提示的话，体验不是很好，如果有上传进度提示，就会好很多。需求当上传的文件相对较大时，用户可能需要等待较长的时间，这个时候前端如果没有任何提示的话，体验不是很好，如果有上传进度提示，就会好很多。而要在上传过程实时显示上传进度，则需要已上传的大小和文件总大小。前提请求是异步的。因为要实时获取到上传的进度...

MageekChiu 2019-08-20 15:17 评论0 收藏0