正文

ajax-----16html5实现大文件切割上传

夺命雷公狗  2022-02-07  666

关键词：

2点多接了个电话导致失眠，没办法，跑起来接着板砖了。。。。。。

废话不多说，直接走码。。。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #jdt{ width:300px; height:25px; }
        progress{ display:none;  width:200px; height:25px;  float:left;  }
        #sd{ float:left;  }        
    </style>
    <script>
        /*
            我们用到的api有Blob，他的file里面有slice方法可以截取二进制对象的一部分。。
            而且我们需要修改php.ini文件，
            upload_max_filesize = 20M ---上传文件，单个文件的最大值
            post_max_size = 20M  post方式最大上传20M

        */
        function bfbs(bfb){
            var pro = document.getElementsByTagName('progress')[0];
            pro.style.display = 'block';
            pro.setAttribute('value',bfb);
            var sd = document.getElementById('sd');
            sd.innerHTML = bfb +'%';
        }
        var clock = null;

        xhr = new XMLHttpRequest();

        function upgo(){
            clock = window.setInterval(selefile,1000);
        }

        var selefile = (function(){
            const LENGTH = 10 * 1024 * 1024; //每次切割10M
            var sta = 0;
            var end = sta + LENGTH;
            var flag = false; //标识上一块正在上传中...
            var blob = null;
            var fd = null;
            var xhr = null;
            var bfb = 0;

            return (function(){
                if(flag == true){
                    return;
                }
                var up_file = document.getElementsByTagName('input')[0].files[0];
                //如果sta大于up_file.size那么就结束咯
                if(sta > up_file.size){
                    clearInterval(clock);
                    return false;
                }
                
                blob = up_file.slice(sta,end);
                var fd = new FormData();
                fd.append('part',blob);
                //请求后端
                up(fd);

                sta = end;
                end = sta + LENGTH;
                flag = false;

                //进队条
                bfb = Math.ceil(100 * end / up_file.size);
                bfb > 100 ? bfb = 100 : bfb = bfb;
                bfbs(bfb);
            });
        })();

        function up(fd){
            xhr.open('POST','./14.php',false);
            xhr.send(fd);
        }
    </script>
</head>
<body>
    
    <div id="jdt"><progress max="100" value=""></progress><span id="sd"><span></div>
    <input type="file" name="part" onchange="upgo();" >
    <div id="desc"></div>
</body>
</html>

这里为了实现兼容谷歌没办法，只能使用闭包方法来写了。。。。。。

效果如下所示。。。

经测试火狐的效果本人感觉比谷歌的酷，嘻嘻。。。

支持ie低版本的上传大文件切割上传断点续传秒传

...分批上传，再组合成一个大文件。支持断点续传，MD5校验实现妙传功能，支查看详情

html5实现浏览器端大文件分片上传

我们平时经常做的是上传文件，上传文件夹与上传文件类似，但也有一些不同之处，这次做了上传文件夹就记录下以备后用。这次项目的需求：支持大文件的上传和续传，要求续传支持所有浏览器，包括ie6,ie7,ie8,ie9,Chrome,Firefox,36... 查看详情

okhttp实现断点上传

前言之前项目需要上传大文件的功能，上传大文件经常遇到上传一半由于网络或者其他一些原因上传失败。然后又得重新上传（很麻烦），所以就想能不能做个断点上传的功能。于是网上搜索，发现市面上很少有断点上传的... 查看详情

php大文件上传解决方案（500m以上）

...了，但程序也要加强了，一下上传500M是哪种语言都不能实现的，唯一解决方案，文件切割，如迅雷下载原理一样（采用续点上传），分成若干小块，然后全部上传完毕以后，再进行文件合成。4.至于PHP的文件切割，切割后上传，... 查看详情

如何用xmlhttprequest实现大文件上传和断点续传

参考技术AH5支持XMLHttpRequest对象，能够实现断店续传。我说一下我的思路吧：首先获取文件的MD5（spark-md5.js），然后利用文件对象的slice方法进行切割文件，分段上传到后台，后台组装文件然后校验MD5值；我也刚好在做，觉得可... 查看详情

html5批量大文件上传下载

...的功能，今天来讲一下JavaWeb中的文件上传和下载功能的实现。先说下要求：PC端全平台支持，要求支持Windows,Mac,Linux支持所有浏览器。支持文件批量上传支持文件夹上传，且要求在服务端保留层级结构。文件夹数量要求支持到10W... 查看详情

html5分割上传实现超大文件无插件网页上传示例

4GB以上超大文件上传和断点续传服务器的实现随着视频网站和大数据应用的普及，特别是高清视频和4K视频应用的到来，超大文件上传已经成为了日常的基础应用需求。但是在很多情况下，平台运营方并没有大文件上传和断点续... 查看详情

java实现大文件上传

文件上传是最古老的互联网操作之一，20多年来几乎没有怎么变化，还是操作麻烦、缺乏交互、用户体验差。一、前端代码英国程序员RemySharp总结了这些新的接口，本文在他的基础之上，讨论在前端采用HTML5的API，对文件上传进... 查看详情

java实现大文件切割并生成多个文件(代码片段)

话不多说，直接上代码importjava.io.*;/****分割大文件*（*SQL文件太大（insert），第三方工具无法一次性读取，进行分割*生成一个一个文件*）*/publicclassSplitFileUtil//使用示例publicstaticvoidmain(String[]args)//目标文件StringtargetFile="F:\\logs\\ins... 查看详情

根据百度网盘的上传原理，自己写大文件上传

在之前大文件的上传我都是通过FilderReader获取文件的base64然后转为Blob在一段一段截取上传，但是这个方法有个弊端就是很大的文件的时候获取文件的base64会使整个浏览器崩溃卡死，后面我去看了一下百度网盘的上传原理我们可... 查看详情

大文件 (> 500MB) 的 HTML5 可恢复和分块上传

...描述】：是否可以使用HTML5(BLOBAPI)为大尺寸文件(>500MB)实现可恢复和切片（分块）上传？我尝试使用https://github.com/blueimp/jQuery-File-Upl 查看详情

将大文件切成块并使用 ajax 和 html5 FileReader 上传

...ileReader【发布时间】：2013-12-1108:19:08【问题描述】：我要实现的是：我在前端使用html5文件api读取文件，然后使用ajax将文件内容上传到php后端，如果文件小也可以。但是，如果文件足够大，它会导致chrome崩溃。所以我使用查看详情

局域网大文件分片上传处理

...分段上传功能，因此在此整理前端大文件上传相关功能的实现。在某些业务中，大文件上传是一个比较重要的交互场景，如上传入库比较大的Excel表格数据、上传影音文件等。如果文件体积比较大，或者网络条件不好时，上传的... 查看详情

网页上传文件夹的解决方案

文件上传控件-如何上传文件-文件夹断点续传

前端中实现文件上传下载的三种解决方案(推荐)

html5大文件上传解决方案支持分片断点上传

核心原理：该项目核心就是文件分块上传。前后端要高度配合，需要双方约定好一些数据，才能完成大文件分块，我们在项目中要重点解决的以下问题。* 如何分片；* 如何合成一个文件；* 中断了从哪个分片开始... 查看详情

基于.netcore+jquery实现文件断点分片上传(代码片段)

基于.NETCore+Jquery实现文件断点分片上传前言该项目是基于.NETCore和Jquery实现的文件分片上传，没有经过测试，因为博主没有那么大的文件去测试，目前上传2G左右的文件是没有问题的。使用到的技术Redis缓存技术Jqueryajax请求技术... 查看详情