HTML 5 File Reader liest javaScript-Dateien

Question

Ich versuche, Benutzern zu erlauben, einen Ordner mit Javascript-Dateien in eine HTML-5-Seite zu ziehen. Dies ist, was ich derzeit habe:

$scope.files = []; 

//Establish dropzone 
var dropbox; 
dropbox = document.getElementById("fileDragAndDrop"); 
dropbox.addEventListener("dragenter", dragenter, false); 
dropbox.addEventListener("dragover", dragover, false); 
dropbox.addEventListener("drop", drop, false); 

//Events 
function dragenter(e) { 
    e.stopPropagation(); 
    e.preventDefault(); 
}; 
function dragover(e) { 
    e.stopPropagation(); 
    e.preventDefault(); 
}; 
function drop(e) { 
    e.stopPropagation(); 
    e.preventDefault(); 

    var items = e.dataTransfer.items; 

    for (var i = 0, item; item = items[i]; i ++) { 
     var entry = item.webkitGetAsEntry(); 

     if(entry) { 
      traverseFileTree(entry); 
     } 
    } 
}; 

//resursive file walker 
function traverseFileTree(item) { 
    if(item.isFile) { 
     $scope.$apply(function() { 
      $scope.files.push(item); 
     }); 
    } else if (item.isDirectory) { 
     var dirReader = item.createReader(); 
     dirReader.readEntries(function(entries) { 
      for (var i = 0; i < entries.length; i++) { 
       traverseFileTree(entries[i]); 
      } 
     }); 
    } 
}; 

So funktioniert das Drag & Drop, aber ich habe Probleme beim Lesen der Datei Inhalt.

$scope.parse = function() { 

    for(var i = 0; i < $scope.files.length; i++) { 

     var fileReader = new FileReader(); 

     fileReader.onload = function (e) { 

      console.log(fileReader.result); 
     }; 

     fileReader.onerror = function(err) { 
      console.log(err); 
     }; 

     fileReader.readAsBinaryString($scope.files[i]); 
    } 
}; 

Ich bekomme keine Fehlermeldungen, was es schwierig macht zu debuggen. Mache ich etwas falsch? Hat jemand irgendwelche Probleme mit ähnlichen Aufgaben gehabt?

Answer 1

Nicht sicher, was Ihr $scope ist, aber es versucht.

Wie Sie webkitGetAsEntry() verwenden, nehme ich an, dass dies für Chrome ist. Aus dem Aussehen davon sollte Ihr Code Ihnen einen Fehler geben. Ist dies nicht der Fall, ist wahrscheinlich etwas ausgelassen worden. Sie sollten normalerweise Folgendes erhalten:

Uncaught TypeError: Failed to execute 'readAsBinaryString' on 'FileReader': The argument is not a Blob.

in Ihrer $scope.parse Funktion.

---

Es gibt ein paar Probleme. Eine davon ist, dass Sie wahrscheinlich files as text lesen und nicht als Binärzeichenfolge. Zweitens readAsBinaryString() ist veraltet, verwenden Sie readAsArrayBuffer(), wenn Sie Binärdaten lesen möchten.

Weiter gibt die webkitGetAsEntry() eine FileEntry zurück, weshalb Sie den oben genannten Fehler erhalten sollten. Um die Datei zu lesen können Sie in der Regel tun:

$scope.files[i].file(success_call_back, [error_call_back]); 

Zum Beispiel:

function my_parser(file) { 
     var fileReader = new FileReader(); 

     fileReader.onload = function (e) { 
      console.log(fileReader.result); 
     }; 

     fileReader.onerror = function(err) { 
      console.log(err); 
     }; 
     console.log('Read', file); 
     // Here you could (should) switch to another read operation 
     // such as text or binary array 
     fileReader.readAsBinaryString(file); 
} 

$scope.files[0].file(my_parser); 

---

Dies werden Ihnen ein File Objekt als Argument my_parser(). Dann könnten Sie normalerweise .type überprüfen und entsprechende Lesefunktion verwenden. (Obwohl sich bewusst sein der Schlaffheit in MIME-Typ Wie in. Verlassen Sie sich nicht darauf, sondern es als Hinweis verwendet werden.)

if (file.type.match(/application\/javascript|text\/.*/)) { 
    // Use text read 
} else if (file.type.match(/^image\/.*/)) { 
    // Use binary read, read as dataURL etc. 
} else ... 

Answer 2

$scope.parse = function() { 

    for(var i = 0; i < $scope.files.length; i++) { 

     var fileReader = new FileReader(); 

     fileReader.onload = function (e) { 

      console.log(fileReader.result); 
     }; 

     fileReader.onerror = function(err) { 
      console.log(err); 
     }; 

     fileReader.readAsText($scope.files[i]); 
    } 
};