web-dev-qa-db-fra.com

Passer un paramètre à l'événement de chargement FileReader

J'ai besoin de lire certains fichiers csv fournis par l'utilisateur. Les fichiers sont transmis à la page/au script à l'aide d'un div par glisser-déposer, qui gère le dépôt de fichier comme suit:

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

J'ai besoin d'analyser chaque fichier avec une bibliothèque csv qui le convertit en tableau, mais j'ai également besoin de garder une trace du nom du fichier que j'analyse actuellement. Voici le code que j'utilise pour analyser chaque fichier:

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

Jusqu'à cela, tout fonctionne très bien. Ce dont j'ai besoin, c'est aussi de passer le nom de fichier au reader.onload événement, par exemple:

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

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

    };
})(currFile);

Est possible? Comment puis-je faire ceci? Merci d'avance pour toute aide, meilleures salutations

javascripthtmlfilereader
20
BeNdErR

Essayez ce qui suit:

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

Ici, vous créez une nouvelle variable fileName chaque fois qu'un fichier est passé à la méthode externe. Vous créez ensuite une fonction qui a accès à cette variable (en raison de la fermeture) et la renvoyez.

48
Graham