js分片上传大文件，前端代码，亲测ok

缺乏、安全感 2022-06-16 03:47 170阅读 0赞

首先得导入jquery.form.js文件，下面src是相对于改js文件位置，

<script type="text/javascript" src="jquery/jquery-form.js"></script>

<script type="text/javascript">  
var BYTES\_PER\_CHUNK = 1024 \* 1024; // 每个文件切片大小定为1MB .  
var slices;  
var totalSlices;  
  
//发送请求  
function sendRequest() \{  
var blob = document.getElementById("file").files\[0\];  
var start = 0;  
var end;  
var index = 0;  
  
  
// 计算文件切片总数  
slices = Math.ceil(blob.size / BYTES\_PER\_CHUNK);  
totalSlices= slices;  
while(start < blob.size) \{  
end = start + BYTES\_PER\_CHUNK;  
if(end > blob.size) \{  
end = blob.size;  
\}  
uploadFile(blob, index, start, end);  
start = end;  
index++;  
if ( index>=totalSlices )  
location="reboot.htm";  
\}  
\}  
  
//上传文件  
function uploadFile(blob, index, start, end) \{  
var xhr;  
var fd;  
var chunk;  
var sliceIndex=blob.name+index;  
chunk =blob.slice(start,end);//切割文件   
fd = new FormData();  
fd.append("UpgradeFileName", chunk, sliceIndex);  
var xhr = new XMLHttpRequest();  
xhr.open('POST', 'cmd.cgi?cmd\_tag=firmware\_upgrade&group\_tag=upgrade', false);//false指同步上传，因为我的服务器内存较小，选择同步，如果追求速度，可以选择 //ture，异步上传  
xhr.send(fd);  
if((xhr.status >=200 && xhr.status < 300) || xhr.status == 304)\{  
setTimeout("",10);  
\}else\{  
uploadFile(blob, index, start, end);  
\}  
\}  
</script>

发表评论取消回复

表情：

评论列表（有 0 条评论，170人围观）

还没有评论，来说两句吧...

相关阅读

相关 Java大文件上传（秒传、分片上传、断点续传）

一、秒传秒传就是不传，实现逻辑就是看数据库或者缓存里是否已经有这个文件了，有了，直接从已有的文件去拿就可以了（返回文件地址）。这里判断是否是相同文件，要用到信息摘

傷城~/ 2024年03月17日 14:18/ 0 赞/ 16 阅读

相关 php+ajax大文件分片上传示例代码

代码思路 PHP在上传超大的文件时，不能只让后端[php上传][php]，会容易上传到一半内测益处失效。需要前端要和后端相互配合一起来处理，文件上传要使用[AJAX][p

Bertha 。/ 2024年03月16日 12:36/ 0 赞/ 7 阅读

相关新手前端实现大文件分片上传

新手前端实现大文件分片上传前言文件上传的场景在工作中时常遇见，必不可免的有时会需要上传一个很大的文件，上传时间比较久，如果遇见网络问题或其他因素影响，容易导致传输失败，

以你之姓@/ 2023年01月19日 09:51/ 0 赞/ 313 阅读

相关 java实现大文件上传分片上传断点续传

我们平时经常做的是上传文件，上传文件夹与上传文件类似，但也有一些不同之处，这次做了上传文件夹就记录下以备后用。这次项目的需求：支持大文件的上传和续传，要求续传支持所有浏

太过爱你忘了你带给我的痛/ 2022年11月26日 08:39/ 0 赞/ 338 阅读

相关大文件分片上传

//分片逻辑像操作字符串一样 var start=0,end=0; while (true) {

àì夳堔傛蜴生んèń/ 2022年10月11日 15:56/ 0 赞/ 232 阅读

相关 js分片上传大文件，前端代码，亲测ok

首先得导入jquery.form.js文件，下面src是相对于改js文件位置， <script type="text/javascript" src="jquery/jque

缺乏、安全感/ 2022年06月16日 03:47/ 0 赞/ 171 阅读

相关文件分片上传——RandomAccessFile

RandomAccessFile是Java输入/输出流体系中功能最丰富的文件内容访问类，既可以读取文件内容，也可以向文件输出数据。与普通的输入/输出流不同的是，RandomAc

墨蓝/ 2022年02月19日 04:27/ 0 赞/ 341 阅读

相关 SpringBoot WebUploader大文件分片上传

后端技术：SpringBoot2.x 页面：freemarker webuploader:[http://fex.baidu.com/webuploader/get

r囧r小猫/ 2022年02月17日 04:26/ 0 赞/ 407 阅读

相关 java springboot 切割分片上传大文件

公司要做一个上传文件的功能，浏览器上传超过500m的文件会崩溃需要切割分片上传前端用的百度的 webuploader插件官网 [http://c7.gg/cdpA6

朴灿烈づ我的快乐病毒、/ 2021年11月14日 11:38/ 0 赞/ 611 阅读

相关 android上传大文件亲测可用，上传200M个文件，不到3分钟

之前贴过个例子是[android 入门学习笔记上传大文件][android _] 这种的文件大小限制很严，一般30M以上就报错了。网上查了一下，还是推荐用Socket连接进行

清疚/ 2021年09月12日 04:34/ 0 赞/ 543 阅读