ajax之上傳檔案顯示實時上傳進度、速度

阿新 • • 發佈：2020-12-23

利用FormData來實現檔案上傳及進度監控

FormData中的upload 事件
- onloadstart 上傳開始
- onprogress 資料傳輸進行中
  - evt.total ：需要傳輸的總大小；
  - evt.loaded :當前上傳的檔案大小；
- onabort 上傳操作終止
- onerror 上傳失敗
- onload 上傳成功
- onloadend 上傳完成（不論成功與否）

上傳檔案進度圖片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" 
>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="file" class="myfile">
    進度：<progress value="0" max="100"></progress 
><span class="percent">0%</span>
    速度：<span class="speed">0b/s</span>
    <button>點選上傳</button>
    <button>取消上傳</button>
</body>
<script>
    let xhr = new XMLHttpRequest();
    let btns = document.querySelectorAll("button" 
);
    let stime;  //開始上傳時間
    let sloaded;  //檔案大小
    btns[0].onclick = function(){
        let file = document.querySelector(".myfile").files[0];
        let form = new FormData();
        form.append("myfile",file);
        xhr.open("post","/fileUpload",true);
        xhr.onload = function(){
            console.log(xhr.responseText);
        }
        xhr.upload.onloadstart = function(){
            console.log("開始上傳");
            stime = new Date().getTime();
            sloaded = 0;
        }
        xhr.upload.onprogress = function(evt){
             // console.log("正在上傳");
            // console.log(evt);
            // 上傳進度處理
            // 當前檔案上傳的大小 evt.loaded
            let percent = (evt.loaded/evt.total*100).toFixed(0);
            // console.log(percent);
            document.querySelector("progress").value = percent;
            document.querySelector(".percent").innerHTML = percent + "%";
            
            // 上傳速度處理
            let endTime = new Date().getTime();
            // 時間差 由於時間差是毫秒  故要除以1000
            let dTime = (endTime - stime)/1000;
            // 當前時間內上傳的檔案大小  
            let dloaded = evt.loaded - sloaded;
            let speed = dloaded/dTime;
            let unit = "b/s";
            stime = new Date().getTime();
            sloaded = evt.loaded;
            if(speed/1024>1){
                unit = "kb/s";
                speed = speed/1024;
            }
            if(speed/1024>1){
                unit = "mb/s";
                speed = speed/1024;
            }
            // console.log(speed.toFixed(2));
            document.querySelector(".speed").innerHTML = speed.toFixed(2) + unit;
        }
        xhr.upload.onload = function(){
            console.log("上傳成功");
        }
        xhr.upload.onloadend = function(){
            console.log("上傳完成");
        }
        xhr.upload.onabort = function(){
            console.log("取消上傳");
        }
        xhr.send(form);
    }
    btns[1].onclick = function(){
        xhr.abort();
    }
</script>
</html>

ajax之上傳檔案顯示實時上傳進度、速度

技術標籤：前後端互動前端ajax 利用FormData來實現檔案上傳及進度監控 FormData中的upload 事件

requests上傳檔案,又要上傳data的處理

前話最近在自己學著弄介面自動化框架，因為要封裝一個傳送請求的父類，其中有考慮到上傳檔案，以及同時上傳檔案，和傳遞其他欄位資料，遇到點小問題這裡解決下。

解決ServletFileUpload上傳檔案時,獲取上傳檔名出現中文亂碼問題

技術標籤：亂碼javaservlet 解決ServletFileUpload上傳檔案時,獲取上傳檔名出現中文亂碼問題

Element UI 上傳檔案 el-upload —— 手動上傳檔案，限制上傳檔案數量，檔案型別校驗等

技術標籤：Element UI 目錄手動上傳選擇檔案時，限定檔案型別選擇檔案時，限制檔案總數

el-upload上傳檔案自定義上傳引數

HTML： <el-upload class=\"upload-demo\" action=\"https://www.baidu.com\"// url :headers=\"headers\"// 請求頭,一般填token、orgid等身份校驗資訊

jquery+ajax實現非同步上傳檔案顯示進度條

前言：今天專案中加了一個上傳檔案加進度條的需求，我就搞了一下。時間寶貴不多說，直接進入正題。

jq ajax 上傳檔案顯示進度

$(\'#uppic\').change(function () { var files = $(this).prop(\'files\'); if (!files.length) { upEnd() return;

react上傳檔案顯示上傳進度

Axios 是一個基於 promise 的 HTTP 庫，可以用在瀏覽器和 node.js 中。在使用react, vue框架的時候, 如果需要監聽檔案上傳可以使用axios裡的onUploadProgress.

Ubuntu下Filezilla 無法上傳某些檔案或者已經上傳的檔名顯示為亂碼

Ubuntu下使用Filezilla與Windows檔案伺服器傳輸檔案出現無法上傳某些檔案或者已經上傳的檔名顯示為亂碼的情況，還有以前遇到過用filezilla從自設的windows遠端機上上傳下載檔案，可是在遠端機上明明存在的

Vue批量上傳檔案及實時進度

<template> <el-row> <el-col :span=\"12\"> <el-upload class=\"upload-demo\" ref=\"upload\" :action=\"upload_url\" drag multiple :auto-upload=\"false\" :on-change=\"beforeAvatarUp