利用slice（start,end）方法对文件进行区域式的一个切割，每一个小部分一小部分的传过去 后台接收 并且存储
继续和停止的判断就是最简单的页面变量来实现的定义全局的
这里我已经写的很简单了 但是还是有不足的地方 有需求大家下面留言提问 有bug 望大家改善也分享给我····差不多了该关电脑了·····
html页面：
<style type="text/css">
#result{
500px;
height:30px;
border:1px solid green;
}
#progress {
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);