使用Blob API

Question

我需要阅读一些由用户提供的csv文件。使用拖放div将文件传递给页面/脚本，该div处理文件删除，如下所示：

function handleFileDrop(evt) {
    evt.stopPropagation();
    evt.preventDefault();
    var files = evt.dataTransfer.files; // FileList object.
    ...
}

我需要用csv库解析每个文件，将其转换为数组，但我还需要跟踪我正在解析的文件名。这是我用来解析每个文件的代码：

for(var x = 0; x < files.length; x++){
    var currFile = files[x];
    var fileName = currFile.name;
    var reader = new FileReader();
    reader.onload = (function(theFile){
        return function(e){
            var csvArr = CSV.csvToArray( e.target.result, ";", true );
            console.log(csvArr); 
        };
    })(currFile);   
    reader.readAsText(currFile);
}

在此之前，一切都很好。我还需要将文件名传递给reader.onload事件，例如：

reader.onload = (function(theFile){
    return function(e){

       ***** I need to have fileName value HERE *****

    };
})(currFile);

有可能吗？我怎样才能做到这一点？在此先感谢任何帮助，最好的问候

Answer 1

尝试以下方法：

var reader = new FileReader();
reader.onload = (function(theFile){
    var fileName = theFile.name;
    return function(e){
        console.log(fileName);
        console.log(e.target.result);
    };
})(currFile);   
reader.readAsText(currFile);

这里，每次将文件传递给外部方法时，您都会创建一个新的fileName变量。然后，您将创建一个函数，该函数可以访问该变量（由于闭包）并将其返回。

Answer 2

使用Blob API

使用new File / Blob API可以轻松得多。

您的第二个代码块-也可以解决您的问题-可以重写为：

import pandas as pd

data = [
    ["tom", 22, "ab 11", "M", 5555],
    ["Rob", 22, "ab 13", "M", 9999],
    ["nick", 33, "ab 14", "M", 3333],
    ["nick", 33, "ab 14", "M", 8888],
    ["juli", 18, "ab 15", "F", 2222],
]
people = pd.DataFrame(data, columns=["Name", "Age", "PostalCode", "Sex", "Salary"])

df = people.groupby(["PostalCode", "Sex", "Age"])["Salary"].sum().unstack(0)

d = {col: df[col].dropna().to_dict() for col in df}

print(d)

# Expected output
print(
    {
        (("ab 11", "M"), ("tom", 22)): 5555,
        (("ab 13", "M"), ("Rob", 22)): 9999,
        (("ab 14", "M"), ("nick", 33)): 12221,
        (("ab 15", "F"), ("juli", 18)): 2222,
    }
)

Blob API使用Promises而不是像Filereader API这样的Event，从而减少了闭包的麻烦。此外，Arrow function （x =>）和iterator 的使代码更加简洁。

选中support。

使用提取API

还可以使用Fetch API Response Object来简化操作。

for (let file of files){
 (new Blob([file])).text().then(x=>console.log(file.name,x));
}

构造函数中缺少for (let file of files){ (new Response(file)).text().then(x=>console.log(file.name,x)); }的注释。

也check support。

将参数传递给FileReader onload事件

2 个答案:

使用Blob API

使用提取API