将大文件切成块，并使用ajax和html5 FileReader上传 [英] slice large file into chunks and upload using ajax and html5 FileReader

问题描述

我想实现的是：

在前端，我使用html5文件api来读取文件，然后将文件的内容上传到php后端使用ajax，如果文件大小是没问题的。但是，如果文件足够大，则会导致Chrome崩溃。所以我使用file.slice将大文件分成块，当所有的块都被上传到php时，将块合并成一个完整的块。

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);
            }
    }

问题是，在文件块全部被上传到服务器并合并为一个新的文件大小小于原始文件，合并的一个被破坏。问题和解决方法在哪里？

The problem is, after the chunks of the file all being uploaded to the server and merged into a new one, the total file size is smaller than the original, and the merged one is broken. Where is the problem and how to fix it?

推荐答案

你的js脚本有一个小错误
我注意到 reader.onprogress 事件比xhr 加载事件触发更多次。在这种情况下，会跳过一些块。尝试在加载函数中增加加载的变量。

There is a small error in your js script I noticed that the reader.onprogress event is triggered more times than the xhr load event. In this case some chunks are skipped. Try to increment the loaded variable inside the load function.

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

var reader = new FileReader();

reader.onload = function(e){
        var xhr = new XMLHttpRequest();
        var upload = xhr.upload;
        upload.addEventListener('load',function(){
        loaded += step;
        progress.value = (loaded/total) * 100;
                if(loaded <= total){
                        blob = file.slice(loaded,loaded+step);

                        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,step);
reader.readAsBinaryString(blob); }

这篇关于将大文件切成块，并使用ajax和html5 FileReader上传的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！