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

In the front end, I use the html5 file api to read the file, and then upload the file's content to the php backend using ajax, and it's ok if the filesize is small. However,if the file is big enough, it causes chrome to crash. So I split the large file into chunks using file.slice, when all chunks are uploaded to the php, merge the chunks into a single complete one.

代码如下:

前端:

<style>
#container {
     min-width:300px;
     min-height:200px;
     border:3px dashed #000;
}
</style>
<div id='container'>

</div>
<script>
function addDNDListener(obj){
    obj.addEventListener('dragover',function(e){
            e.preventDefault();
            e.stopPropagation();
    },false);
    obj.addEventListener('dragenter',function(e){
            e.preventDefault();
            e.stopPropagation();
    },false);
    obj.addEventListener('drop',function(e){
            e.preventDefault();
            e.stopPropagation();
            var ul = document.createElement("ul");
            var filelist = e.dataTransfer.files;
            for(var i=0;i<filelist.length;i++){
                    var file = filelist[i];
                    var li = document.createElement('li');
                    li.innerHTML = '<label id="'+file.name+'">'+file.name+':</label>  <progress value="0" max="100"></progress>';
                    ul.appendChild(li);
            }
            document.getElementById('container').appendChild(ul);
            for(var i=0;i<filelist.length;i++){
                    var file = filelist[i];
                    uploadFile(file);
            }
    },false);
}

function uploadFile(file){
    var loaded = 0;
    var step = 1024*1024;
    var total = file.size;
    var start = 0;
    var progress = document.getElementById(file.name).nextSibling;

    var reader = new FileReader();

    reader.onprogress = function(e){
            loaded += e.loaded;
            progress.value = (loaded/total) * 100;
    };

    reader.onload = function(e){
            var xhr = new XMLHttpRequest();
            var upload = xhr.upload;
            upload.addEventListener('load',function(){
                    if(loaded <= total){
                            blob = file.slice(loaded,loaded+step+1);
                            reader.readAsBinaryString(blob);
                    }else{
                            loaded = total;
                    }
            },false);
            xhr.open("POST", "upload.php?fileName="+file.name+"&nocache="+new Date().getTime());
            xhr.overrideMimeType("application/octet-stream");
            xhr.sendAsBinary(e.target.result);
    };
    var blob = file.slice(start,start+step+1);
    reader.readAsBinaryString(blob);
}

window.onload = function(){

    addDNDListener(document.getElementById('container'));
    if(!XMLHttpRequest.prototype.sendAsBinary){ 
              XMLHttpRequest.prototype.sendAsBinary = function(datastr) {  
                        function byteValue(x) {  
                            return x.charCodeAt(0) & 0xff;  
                        }  
                        var ords = Array.prototype.map.call(datastr, byteValue);  
                        var ui8a = new Uint8Array(ords);  
                        try{
                            this.send(ui8a);
                        }catch(e){
                            this.send(ui8a.buffer);
                        }  
              };  
    }
};
</script>

php 代码:

<?php
     $filename = "upload/".$_GET['fileName'];
     //$filename = "upload/".$_GET['fileName']."_".$_GET['nocache'];
     $xmlstr = $GLOBALS['HTTP_RAW_POST_DATA'];
     if(empty($xmlstr)){
             $xmlstr = file_get_contents('php://input');
     }
     $is_ok = false;
     while(!$is_ok){
            $file = fopen($filename,"ab");

            if(flock($file,LOCK_EX)){
                    fwrite($file,$xmlstr);
                    flock($file,LOCK_UN);
                    fclose($file);
                    $is_ok = true;
            }else{
                    fclose($file);
                    sleep(3);
            }
    }

问题是，文件的chunk全部上传到服务器并合并为一个新文件后，文件总大小比原来的要小，合并后的文件坏了.问题出在哪里以及如何解决?