利用slice（start,end）方法对文件进行区域式的一个切割，每一个小部分一小部分的传过去 后台接收 并且存储
继续和停止的判断就是最简单的页面变量来实现的定义全局的
这里我已经写的很简单了 但是还是有不足的地方 有需求大家下面留言提问 有bug 望大家改善也分享给我····差不多了该关电脑了·····
html页面：
<style type="text/css"> #result{ width:500px; height:30px; border:1px solid green; } #progress { width: 0%; height:100%; background:green; }</style><body><div id="result"><div id="progress"></div></div><input type="file" id="file"/><button id="bg_to">上传</button><button onclick="sendStop()">停止</button><button onclick="sendStart()">继续</button>
</body>
js里面主要是3部分的
<script type="text/javascript"> const BYTES_PER_CHUNK = 1024*1024; // 每个文件切片大小定为0.5MB . var slices; var totalSlices; var start = 0; var end=BYTES_PER_CHUNK; var index = 0; var stop = 0 $("#bg_to").click(function(){ var file=$("#file"); if($.trim(file.val())==''){ alert("请选择文件"); return false; } sendRequest() }) function sendStop(){ if(start==0){ alert("未检测到文件上传") return false } stop = 1 } function sendStart(){ if(start==0){ alert("未检测到文件上传") return false } stop = 0 sendRequest(); } //发送请求 sendRequest = function () { var blob = document.getElementById('file').files[0]; // 计算文件切片总数 slices = Math.ceil(blob.size / BYTES_PER_CHUNK); totalSlices= slices; if(stop==1){ alert("停止上传"); return false } if(start < blob.size) { if(end > blob.size) { end = blob.size; } uploadFile(blob, index, start, end); start = end; end = start + BYTES_PER_CHUNK; index++; } } //上传文件 uploadFile = function (blob, index, start, end) { var xhr; var fd; var chunk; xhr = new XMLHttpRequest(); xhr.onreadystatechange = function() { if(xhr.readyState == 4) { if(xhr.responseText) { alert(xhr.responseText); } if(slices>1){ slices--; } var percent=100*index/slices; if(percent>100){ percent=100; }else if(percent==0&&slices==1){ percent=100; } document.getElementById('progress').style.width=percent+'%'; document.getElementById('progress').innerHTML=parseInt(percent)+'%'; // 如果所有文件切片都成功发送，发送文件合并请求。 if(percent == 100) { mergeFile(blob); start=0; alert('文件上传完毕'); }else{ if(stop!=1){ sendRequest(); } } } }; chunk =blob.slice(start,end);//切割文件 //构造form数据 fd = new FormData(); fd.append("file", chunk); fd.append("name", blob.name); fd.append("index", index); xhr.open("POST", "upload.php", true); //设置二进制文边界件头 xhr.setRequestHeader("X_Requested_With", location.href.split("/")[3].replace(/[^a-z]+/g, '$')); xhr.send(fd); } mergeFile = function (blob) { var xhr; var fd; xhr = new XMLHttpRequest(); fd = new FormData(); fd.append("name", blob.name); fd.append("index", totalSlices); xhr.open("POST", "mer_add.php", true); xhr.setRequestHeader("X_Requested_With", location.href.split("/")[3].replace(/[^a-z]+/g, '$')); xhr.send(fd); }</script>
upload.php 负责接收数据 将切片存储起来
<?php$target = "files/" .iconv("utf-8","gbk",$_POST["name"]) . '-' . $_POST['index']; //接收文件名时进行转码，防止中文乱码。move_uploaded_file($_FILES['file']['tmp_name'], $target);sleep(1);
mer_add.php 负责将所有的切片组装成图片
<?php//文件合并$target = "files/" .iconv("utf-8","gbk",$_POST["name"]);$dst = fopen($target, 'wb');for($i = 0; $i <= $_POST['index']; $i++) { $slice = $target . '-' . $i; $src = fopen($slice, 'rb'); stream_copy_to_stream($src, $dst); fclose($src); unlink($slice);}fclose($dst);
来源：https://www.cnblogs.com/ghjbk/p/7504448.html