Javascript将文件切成块并通过php将解析后的数据发送到mysql

时间:2015-01-11 20:57:17

标签: javascript php mysql drag-and-drop filereader

我尝试用ajax,chunk文件处理文件,并通过php将解析后的信息发送到mysql。以下是文件样本:

test;test;test
test1;test2;test3

等。 但是如果我发送一个大文件(等待时间超过40秒,600KB文件),php就会陷入困境 PHP:

<?php
$file = @$GLOBALS['HTTP_RAW_POST_DATA'];
    if(empty($file)){
        $file = file_get_contents('php://input');
    }
    if(!empty($file)){
    function parser($file){
       // parser
    }
    parser($file);
    foreach($parsed_results as $key => $val){
       mysql_query("INSERT INTO ...");
    }
    }
?>

使用Javascript:

<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 filelist = e.dataTransfer.files;
            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 = $(".progress-bar");

        var reader = new FileReader();


        reader.onload = function(e){
            $("#container h3").hide();
            $(".progress").fadeIn();
            var xhr = new XMLHttpRequest();
            var upload = xhr.upload;
            upload.addEventListener('load',function(){
                loaded += step;
                progress.width((loaded/total) * 100);
                if(loaded <= total){
                    blob = file.slice(loaded,loaded+step);
                    reader.readAsBinaryString(blob);
                    } else {
                    loaded = total;
                }
            }, false);
            xhr.open("POST", "/add.php";
            xhr.overrideMimeType("application/octet-stream");
            xhr.sendAsBinary(e.target.result);
        };
        var blob = file.slice(start,step);
        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>

HTML:

<div id="container">
    <h3>Drag and Drop file here</h3>
    <div style="display:none" class="progress">
      <div class="progress-bar"></div>
    </div>
    </div>

0 个答案:

没有答案