閱讀javaScript文件的HTML 5文件讀取器

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的。從它的外觀你的代碼應該給你一個錯誤。如果沒有，那麼可能有一些你已經省略了。通常，您應該得到這樣的：在你的$scope.parse功能

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

。

---

有幾個問題。一個是你可能會讀files as text而不是二進制字符串。其次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); 

---

這會給你一個File對象作爲參數傳遞給my_parser()。然後，您通常可以檢查.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]); 
    } 
};