HTML5ファイルリーダーがjavaScriptファイルを読み取る

Question

ユーザーがjavascriptファイルを含むフォルダをhtml 5ページにドラッグアンドドロップできるようにしようとしています。これは私が現在持っているものです。

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

だから、ドラッグ＆ドロップ動作しますが、ファイルの内容を読んで問題を抱えてイム。

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

エラーメッセージが表示されないため、デバッグが難しくなります。何か間違っているのですか？誰も似たような仕事をしている問題はありましたか？

Answer 1

あなたの$scopeが何であるかわかりませんが、それを行ってください。

webkitGetAsEntry()を使用しているため、これはChrome用であると想定しています。それの外観からあなたのコードはあなたにエラーを与える必要があります。そうでない場合は、省略した可能性があります。通常は、

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

（$scope.parse）の機能が必要です。

---

いくつかの問題があります。 1つは、おそらくfiles as textを読み、バイナリ文字列ではないということです。第2に、readAsBinaryString()は非推奨です。バイナリデータを読み取る場合は、readAsArrayBuffer()を使用してください。

さらに、webkitGetAsEntry()はFileEntryを返します。そのため、上記のエラーが発生するのはなぜですか。あなたができたファイルを読むには、通常の操作を行います。

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

例えば：

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

---

これはmy_parser()にあなたの引数としてFileオブジェクトを提供します。通常、.typeをチェックし、適切な読み取り機能を使用できます。 （ただし、MIMEタイプで緩みに注意してくださいのように：。それに依存しているが、ヒントとしてそれを使用しないでください。）

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