文件切片上传 并且实现 暂停 和继续上传功能（断点上传）

利用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);
posted @ 2017-09-11 12:55  ノGHJ  阅读(4633)  评论(0)  编辑  收藏  举报