使用原生JS 或jquery ajax 獲取上傳圖片實時進度

PingCAP 發布于2019-08-22 13:52 / 2450人閱讀

話不多說直接上代碼

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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