HTML 5 파일 판독기에서 Java 스크립트 파일 읽기

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 기능)을 사용해야합니다.

---

몇 가지 문제가 있습니다. 하나는 아마도 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]); 
    } 
};