javascript FileReader - 以块的形式解析长文件 [英] javascript FileReader - parsing long file in chunks

问题描述

我有很长的文件需要解析。因为它很长，我需要通过块来做大块。我试过这个：

  function parseFile（file）{
 var chunkSize = 2000; 
 var fileSize =（file.size  -  1）; 
 
 var foo = function（e）{
 console.log（e.target.result）; 
}; 
 
 for（var i = 0; i< fileSize; i + = chunkSize）
 {
（function（fil，start）{
 var reader = new FileReader（）; 
 var blob = fil.slice（start，chunkSize + 1）; 
 reader.onload = foo; 
 reader.readAsText（blob）; 
}）（文件，我）; 
 
 
 
 
 
 
 $ b 
运行后我只看到第一个块安慰。如果我将'console.log'更改为jquery附加到某个div，我只能看到该div中的第一个块。其他块怎么样？如何使它工作？
解决方案
  FileReader  API是异步的，因此您应该使用 block 调用来处理它。一个 for循环是不会做的，因为在读下一个块之前，它不会等待每个读操作完成。 
这是一个工作方法。
 
 pre $函数parseFile（文件，回调）{
 var fileSize = file。尺寸; 
 var chunkSize = 64 * 1024; // bytes 
 var offset = 0; 
 var self = this; //我们需要对当前对象的引用
 var chunkReaderBlock = null; 
 
 var readEventHandler = function（evt）{
 if（evt.target.error == null）{
 offset + = evt.target.result.length; 
回调（evt.target.result）; //回调处理读取块
} else {
 console.log（Read error：+ evt.target.error）; 
返回; 
 
 if（offset> = fileSize）{
 console.log（完成读取文件）; 
返回; 
} 
 
 //到下一个块
 chunkReaderBlock（offset，chunkSize，file）; 
 
 
 chunkReaderBlock =函数（_offset，length，_file）{
 var r = new FileReader（）; 
 var blob = _file.slice（_offset，length + _offset）; 
 r.onload = readEventHandler; 
 r.readAsText（blob）; 
} 
 
 //现在让我们用第一个块
 chunkReaderBlock（offset，chunkSize，file）开始读取; 
} 
  

I have long file I need to parse. Because it's very long I need to do it chunk by chunk. I tried this:

function parseFile(file){
    var chunkSize = 2000;
    var fileSize = (file.size - 1);

    var foo = function(e){
        console.log(e.target.result);
    };

    for(var i =0; i < fileSize; i += chunkSize)
    {
        (function( fil, start ) {
            var reader = new FileReader();
            var blob = fil.slice(start, chunkSize + 1);
            reader.onload = foo;
            reader.readAsText(blob);
        })( file, i );
    }
}

After running it I see only the first chunk in the console. If I change 'console.log' to jquery append to some div I see only first chunk in that div. What about other chunks? How to make it work?

解决方案

FileReader API is asynchronous so you should handle it with block calls. A for loop wouldn't do the trick since it wouldn't wait for each read to complete before reading the next chunk. Here's a working approach.

function parseFile(file, callback) {
    var fileSize   = file.size;
    var chunkSize  = 64 * 1024; // bytes
    var offset     = 0;
    var self       = this; // we need a reference to the current object
    var chunkReaderBlock = null;

    var readEventHandler = function(evt) {
        if (evt.target.error == null) {
            offset += evt.target.result.length;
            callback(evt.target.result); // callback for handling read chunk
        } else {
            console.log("Read error: " + evt.target.error);
            return;
        }
        if (offset >= fileSize) {
            console.log("Done reading file");
            return;
        }

        // of to the next chunk
        chunkReaderBlock(offset, chunkSize, file);
    }

    chunkReaderBlock = function(_offset, length, _file) {
        var r = new FileReader();
        var blob = _file.slice(_offset, length + _offset);
        r.onload = readEventHandler;
        r.readAsText(blob);
    }

    // now let's start the read with the first block
    chunkReaderBlock(offset, chunkSize, file);
}

这篇关于javascript FileReader - 以块的形式解析长文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！