javascript读取文件_文件上传带进度条进阶-断点续传

最新推荐文章于 2024-05-24 10:47:22 发布
最新推荐文章于 2024-05-24 10:47:22 发布
阅读量113 收藏
点赞数
文章标签： javascript读取文件 javascript读取本地文件 文件上传status 400 
说明
1. 把文件按大小1M分割成N份
2. 每次上传时，告诉后台大文件的md5、当前第几份（从0开始）、总共几份
3. 并行上传，前端同时开启5个请求进行传输增加速度
4. 上传失败或出错后，继续上传下一份，把出错的份放在队尾，如果一直出错则中断请求防止死循环
5. 后台接受文件后通过md5进行比对，上次是否接受过此文件，如果接受则跳过，最后进行文件合并出来
6. 前端代码如下...
7. 查看源代码请点击在线演示地址

先上html

<input id="fileInput" type="file" multiple="multiple" name="" />

<ul id="box">
    <!-- <li>
        <span>文件名</span>
        <span>文件类型</span>
        <span>文件大小</span>
        <span>上传进度</span>
        <span>总进度</span>
        <span>操作</span>
    </li>
    <li>
        <span></span>
        <span></span>
        <span></span>
        <span>
            <i><em></em></i>
            <i><em></em></i>
            <i><em></em></i>
            <i><em></em></i>
            <i><em></em></i>
        </span>
        <span>
            <i><em></em></i>
        </span>
        <span>
            <a href="javascript:;">上传</a>
            <a href="javascript:;">暂停</a>
            <a href="javascript:;">删除</a>
        </span>
    </li> -->
</ul>

选择input时把文件信息写在页面上，因为涉及到断点续传，为保证文件的唯一性，需要本地读取文件并对其进行md5

fileInput.addEventListener('change', function() {
    var files = this.files;
    if (files.length) {
        let str = '<li><span>文件名</span><span>文件类型</span><span>文件大小</span><span>上传进度</span><span>总进度</span><span>操作</span></li>';
        for (var i = 0; i < files.length; i++) {
            var file = files[i];
            str += `<li>
                <span>${file.name}</span>
                <span>${file.type}</span>
                <span>${formatByte(file.size)}</span>
                <span>
                    <i><em></em></i>
                    <i><em></em></i>
                    <i><em></em></i>
                    <i><em></em></i>
                    <i><em></em></i>
                </span>
                <span>
                    <i><b>文件读取中</b></i>
                    <i><em></em></i>
                </span>
                <span data-index="${i}">
                    <a data-control="1" href="javascript:;">上传</a>
                    <a data-control="2" href="javascript:;">暂停</a>
                    <a data-control="3" href="javascript:;">删除</a>
                </span>
            </li>`;
        }
        box.innerHTML = str;
        readFilesStep(0); // 文件太大，同步读取
    } else {
        box.innerHTML = ''
    }
}, false);

同步读取文件操作

function readFilesStep(i) {
    var files = fileInput.files;
    if (!files[i]) {return}
    var oLi = box.children[i + 1];
    oLi.dataset.count = Math.ceil(files[i].size / SIZE); // 总共多少份
    var readProgress = oLi.children[4].children[0].children[0];
    var reader = new FileReader();
    reader.readAsDataURL(files[i]);
    reader.onload = function () {
        oLi.dataset.md5 = md5(this.result);
        readProgress.innerHTML = '文件读取完毕';
        readProgress.parentNode.className = 'stop hide';
        readFilesStep(i + 1);
        reader = null;
    }
    reader.onerror = function (e) {
        console.error(e);
        readProgress.innerHTML = '文件读取失败，请重新选择';
        readFilesStep(i + 1);
        reader = null;
    }
}

因为li是创建出现的，对box进行事件委托

box.addEventListener('click', function (ev) {
    var target = ev.target;
    var control = target.dataset.control;
    var index = Number(target.parentNode.dataset.index);
    if (control === "1") {
        // 上传
        uploadItem(index);
    } else if (control === "2") {
        // 暂停
        pauseItem(index);
    } else if (control === "3") {
        // 删除
        delItem(index);
    }
}, false);

上传代码如下

var SIZE = 1024 * 1024; // 切片大小 
var FETCH_NUM = 5; // 上传文件同时发起请求数
var FETCH_MAP = {}; // 上传请求句柄，取消请求用
var FETCH_POOL = {}; // 每一个上传文件的份数

function uploadItem(index) {
    var file = fileInput.files[index];
    var oLi = box.children[index + 1];
    var isPlaying = Number(oLi.dataset.playing) || 0;
    if (isPlaying) { return }
    oLi.dataset.playing = 1;
    var fileMd5 = oLi.dataset.md5;
    var count = oLi.dataset.count;
    var lastLoaded = Number(oLi.dataset.lastLoaded || 0);
    if (!fileMd5) {
        alert('请等待文件读取')
    } else {
        var maxErrorTimes = 10; // 最大出错次数

        // 第一次点开始会进行创建
        if (!FETCH_POOL[fileMd5]) {
            FETCH_POOL[fileMd5] = [];
            for (var i = 0; i < count; i++) {
                FETCH_POOL[fileMd5][i] = i;
            }
        }

        FETCH_MAP[fileMd5] = [];
        for (var i = 0; i < FETCH_NUM; i++) {
            FETCH_MAP[fileMd5][i] = null;
            step(i)
        }
        function step(i) {
            var cur = FETCH_POOL[fileMd5].shift();
            if (cur !== undefined) {
                FETCH_MAP[fileMd5][i] = uploadStep({
                    file: file, cur: cur, count: count, md5: fileMd5,
                    progressCb: function(e) {
                        var loaded = lastLoaded + e.loaded;
                        setProgress(loaded);
                        var progressItem = (e.loaded / e.total * 100).toFixed(2) + '%';
                        var oProgressItem = oLi.children[3].children[i];
                        oProgressItem.title = progressItem;
                        oProgressItem.children[0].style.width = progressItem;
                        if (progressItem === '100.00%') {
                            oProgressItem.className = 'stop'
                        } else {
                            oProgressItem.className = ''
                        }
                    }, successCb: function(){
                        lastLoaded += SIZE;
                        setProgress(lastLoaded, true);
                        step(i);
                    }, errorCb: function(status) {
                        // 失败把当前份放在末尾，继续下一步
                        FETCH_POOL[fileMd5].push(cur);
                        if (status === 0) {
                            // 手动取消 暂停
                        } else if (maxErrorTimes--) {
                            // 出错10次后不再上传，防止进入死循环
                            step(i);
                        }
                    }
                });
            }
        }

        function setProgress(loaded, isFinished) {
            var oProgress = oLi.children[4].children[1];
            // 实际上传的数据大小 > 文件大小，此处做修正处理
            if (loaded > file.size) {
                if (isFinished) {
                    loaded = file.size;
                    oProgress.className = 'stop';
                } else {
                    loaded = file.size * 0.9999;
                }
            }
            oLi.children[2].innerHTML = formatByte(loaded) + '/' + formatByte(file.size);

            var progress = (loaded / file.size * 100).toFixed(2) + '%';
            var lastProgress = oProgress.title || '0%';
            // 并行上传 此处可能是线路1的进度和线路2的进度比较,优先显示最大值
            progress = parseFloat(lastProgress) < parseFloat(progress) ? progress : lastProgress;
            // 总进度条
            oProgress.title = progress;
            oProgress.children[0].style.width = progress;
            if (isFinished) {
                oLi.dataset.lastLoaded = loaded;
            }
        }
    }
}

分步上传代码

function uploadStep(obj) {
    var file = obj.file;
    var cur = obj.cur;
    var fileMd5 = obj.md5;
    var count = obj.count;
    var progressCb = obj.progressCb;
    var successCb = obj.successCb;
    var errorCb = obj.errorCb;

    var params = new FormData();
    var filename = file.name;
    var fileChunk = file.slice(SIZE * cur, SIZE * (cur + 1));
    params.append('md5', fileMd5);
    params.append('file', fileChunk);
    params.append('cur', cur);
    params.append('count', count);
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4) {
            if (xhr.status == 200) {
                successCb && successCb(JSON.parse(xhr.responseText))
            } else {
                errorCb && errorCb(xhr.status)
            }
        }
    }
    xhr.upload.onprogress = function (e) {
        progressCb && progressCb(e)
    }
    xhr.open('POST', '/api/upload', true);
    xhr.send(params);
    return xhr;
}

function formatByte(b) {
    var kb = b / 1024;
    if (kb >= 1024) {
        var m = kb / 1024;
        if (m >= 1024) {
            var g = m / 1024;
            return g.toFixed(2) + 'G';
        } else {
            return m.toFixed(2) + 'M';
        }
    } else {
        return kb.toFixed(2) + 'K';
    }
}

点击暂停时，取消上个建立的XMLHttpRequest请求，这里用FETCH_MAP[md5]进行标记

function pauseItem(index) {
    var file = fileInput.files[index];
    var oLi = box.children[index + 1];
    var isPlaying = Number(oLi.dataset.playing) || 0;
    if (!isPlaying) { return }
    oLi.dataset.playing = 0;
    var fileMd5 = oLi.dataset.md5;

    for (var i = 0; i < FETCH_MAP[fileMd5].length; i++) {
        if (FETCH_MAP[fileMd5][i]) {
            FETCH_MAP[fileMd5][i].abort();
            FETCH_MAP[fileMd5][i] = null;
        }
    }
}

点击删除时，取消上次请求，并隐藏li

function delItem(index) {
    var file = fileInput.files[index];
    var oLi = box.children[index + 1];
    var fileMd5 = oLi.dataset.md5;
    oLi.className = 'hide';

    if (FETCH_MAP[fileMd5]) {
        for (var i = 0; i < FETCH_MAP[fileMd5].length; i++) {
            if (FETCH_MAP[fileMd5][i]) {
                FETCH_MAP[fileMd5][i].abort();
                FETCH_MAP[fileMd5][i] = null;
            }
        }
    }
}

效果图：

593c6dd7129743a1634772de11ae4a13.png
https://www.zhihu.com/video/1086059444886044672

在线演示地址：上传大文件

Web Worker 真正的多线程上传，待更新。。。

weixin_39540020
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
fetch-progress:获取API的响应进度
05-06
获取API的响应进度。 获取您的响应的进度报告，该响应从获取中获取，例如百分比，速度，总计，已传输，eta和剩余。 安装 npm i fetch-progress 用法 将fetchProgress方法导入您的项目 import fetchProgress from 'fetch-progress 现在在提取调用中使用fetchProgress方法，尝试在使用响应之前将其放入。 你可以 fetch(this.props.src) .then( fetchProgress({ // implement onProgress method onProgress(progress) { console.log({ progress }); // A possible progress report y
php+html+js+css实现文件断点续传
03-25
在IT领域，断点续传是一项非常实用的技术，尤其在大文件传输中，它能够提高用户体验并节省网络资源。这个项目是关于如何使用PHP、HTML、JavaScript（JS）和CSS来实现一个纯前端的多文件断点续传功能。下面我们将深入...
Axios 与Fetch 的区别
乌龙茶不甜的博客
03-07 1744
Axios与Fetch的区别
【fetch 上传和下载进度】
最新发布
robertpanvip的博客
05-24 258
fetch 上传进度
浏览器接口 fetch 发起的请求如何跟踪上传进度?
湖北太米网络科技有限公司
12-09 1586
在`reader.read().then()`的回调函数中，我们按块读取文件的内容，累计已上传的大小`uploadedSize`并计算上传进度。在使用浏览器接口`fetch`发起请求时，你可以利用`ReadableStream`对象的`onprogress`事件来跟踪上传进度。`fetch`函数返回的是一个`Promise`对象，可以通过调用`response.body.getReader()`获取到`ReadableStream`，然后通过监听`onprogress`事件来获取上传进度信息。
XHR、Fetch实现真实的下载、上传进度
newpepole的博客
08-30 1535
实时上传场景、使用xhr和fetch两种方案
上传文件
Sole_Memory1的博客
09-21 149
// 选择文件上传控件 var file = document.querySelector('#file'); var preview = document.querySelector('#preview'); // 当用户选择完文件以后 file.onchange = function () { // 1 创建文件读取对象 var reader = new FileReader();...
前端大文件上传 + 断点续传解决方案
05-26
在现代Web应用中，大文件上传和断点续传功能是提高用户体验的关键因素。这个解决方案主要涉及前端技术，包括Vue框架、Element-UI组件库，以及利用Blob对象、FileReader API、WebWorker和spark-md5库来实现。下面将...
filesUpload:前端文件上传，支持大文件、断点续传
05-10
在本文中，我们将深入探讨JavaScript中的大文件上传与断点续传技术，并基于`filesUpload-master`这个项目进行详细解析。 首先，让我们了解什么是大文件上传。传统的HTML `<input type="file">`标签在上传文件时，...
spring boot + plupload实现大文件断点续传
10-18
结合plupload这样的前端文件上传库，可以实现大文件的断点续传功能，提升用户体验并确保文件传输的可靠性。下面我们将详细探讨如何使用Spring Boot和plupload实现这一功能。 首先，plupload是一款开源的多浏览器...
基于ajax实现文件上传并显示进度条
09-03
然而，需要注意的是，为了处理大文件上传，可能需要考虑分块上传、断点续传等高级特性，以防止内存溢出和长时间阻塞浏览器。此外，考虑到安全性，应验证上传文件的类型和大小，防止恶意文件上传。
上传文件显示进度条_文件上传带进度条进阶-断点续传
weixin_39614637的博客
01-14 363
说明 1. 把文件按大小1M分割成N份 2. 每次上传时，告诉后台大文件的md5、当前第几份（从0开始）、总共几份 3. 并行上传，前端同时开启5个请求进行传输增加速度 4. 上传失败或出错后，继续上传下一份，把出错的份放在队尾，如果一直出错则中断请求防止死循环 5. 后台接受文件后通过md5进行比对，上次是否接受过此文件，如果接受则跳过，最后进行文件合并出来 6. 前端代码如下... 7. 查看...
js ES6 fetch 方法
青蛙king的博客
07-19 9339
一、fetch 概述 fetch 是一种 HTTP 数据请求的方式，是 XMLHttpRequest 的一种替代方案。 fetch 不是 ajax 的进一步封装，没有使用 XMLHttpRequest对象。fetch 是原生 JavaScript。 fetch 与 ajax 的区别： fetch()返回的promise将不会拒绝http的错误状态，即使响应是一个HTTP 404或者500——当接收到一个代表错误的 HTTP 状态码时，从 fetch() 返回的 Promise 不会被标记为 reje
Vue封装基于ajax和fetch两种方式上传文件组件完整代码
斗师——Ace
12-13 788
参考：https://www.php.cn/js-tutorial-395168.html以及element-ui的图片上传源码。图片上传虽然是多选，但是实际上传图片上传的时候 仍然是一张一个一张一个请求上传的。 1. 新建axios.js文件,实现ajax文件上传： //新建axios.js文件,实现ajax文件上传 export default function sendRequest(...
AJAX和FETCH请求进度条
m0_47195133的博客
01-31 973
AJAX和FETCH请求进度条
ajax、fetch上传数据
qq_26983555的博客
02-25 688
这个是ajax上传的： 这个是ajaxsubmit：handleUploadForIEhack=()=>{ //IE hack const that = this ; $("#formForIE").ajaxSubmit({ url: `/api/Info?id=${that.state.ID}`, /*设置pos
JavaScript XHR、Fetch
weixin_42069147的博客
01-30 705
什么是HTTP呢？超文本传输协议（英语：HyperTextTransfer Protocol，缩写：HTTP）是一种用于分布式、协作式和超媒体信息系统的应用层协议； HTTP是万维网的数据通信的基础，设计HTTP最初的目的是为了提供一种发布和接收HTML页面的方法； 通过HTTP或者HTTPS协议请求的资源由统一资源标识符（Uniform Resource Identifiers，URI）来标识；。
PHP V5.2 中的新增功能，第 5 部分: 跟踪文件上传进度
09-23 841
 Tracy Peterson (tracy@tracypeterson.com), 自由撰稿人, Consultant2007 年 6 月 08 日PHP V5.2 为开发人员添加了 hook 以利用实时跟踪文件上传进度的功能。本文是 “PHP V5.2 中的新增功能” 系列文章（共五部分）的第 5 部分，将向您展示如何监视文件上传并相应地编写代码，以及如何创建 PHP 进度条。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值