JavaScript를 사용하여 배열에 로컬 파일 구문 분석

Question

로컬 파일을 읽고 JavaScript를 사용하여 배열의 각 행을 인덱스로 사용하려고합니다. 나는 과거 20 분을 찾고 있었고 어리 석거나 내 문제와 관련된 대답이 정말로 없다. (하지만 전 P 일 가능성이있다.) 나는 JavaScript에 정말 익숙하다. 만약 당신이 대답을 가지고 있다면, 코드를 주석으로 적어주세요. 무슨 일이 일어나고 있는지 알 수 있을까요?

또한 인터넷에서 검색 한 결과 일부 사용자는 JavaScript가 보안상의 이유로 로컬 파일을 읽을 수 없다고 말했습니다. 올바른지 알고 싶으면 다른 언어를 사용할 수 있습니까? PHP가 그 옵션이라면 약간 익숙합니다. 의심 스럽습니다.

편집 thg435의 질문에 따라, 나는 내가 달성하기 위해 노력하고 무엇을 설명 할 것이다.

나의 프로젝트는 온타리오 정부 (내가 한)가 수집 한 수질 데이터를 분석하여 어떤 방식 으로든 표시하는 것이다. Google Maps API를 사용하여 웹 페이지에 표시하도록 선택했습니다. 현재 화학 물질 파일이 있습니다. 각 라인은 다른 화학 물질입니다. 배열에서 파일을 읽은 다음 배열에 화학 물질을 표시하는 옵션 메뉴를 만들고 싶습니다.

또한 로컬 파일은 항상 동일한 이름과 위치가됩니다. 사람들이 클릭하고 파일을 선택하거나 드래그 앤 드롭하는 상자가있는 것을 나는 보았습니다.하지만 내가 찾는 것은 아닙니다.

---

나는 이것을 올바르게 설명했다고 생각하지 않습니다. 단어가 들어있는 HTML 및 JavaScript 파일과 동일한 디렉토리에 파일이 있습니다. 예 :

행 1 : "철" 2 호선 : "알루미늄" 3 호선 : 등 "스틸"

...

내가 파일을 읽고 각 행을 구문 분석하고 싶습니다 배열의 다른 색인으로 I사용자가 <input ... /> 것을 사용하여 읽을 파일을 선택할 수 없도록하려는 경우

Answer 1

FileReader API을 살펴볼 것입니다. 이렇게하면 readAsText()을 통해 로컬 파일의 텍스트를 읽을 수 있습니다. 모든 브라우저에서 작동하지는 않지만 모든 최신 브라우저에서 작동해야합니다. 어떤 브라우저가 그것을 지원하는지 볼 수 있습니다 here.

Example

:

<input id="file" type="file" /> 

var filesInput = document.getElementById("file"); 
filesInput.addEventListener("change", function (event) { 
    var files = event.target.files; 
    var file = files[0]; 
    var reader = new FileReader(); 
    reader.addEventListener("load", function (event) { 
     var textFile = event.target; 
     alert(textFile.result); 
    }); 
    reader.readAsText(file); 
}); 

그것은 사용자 상호 작용없이을 FileReader API를 호출 할 수 없습니다. 결과적으로 사용자는 순수 JS로 읽으려면로드 할 파일을 선택해야합니다. 나는 이것이 서버에 있다고 가정하기 때문에 화학 물질리스트를 서버에 넣고 GETJSON 인코딩 된 결과 배열을 나열하는 것이 어떻겠습니까? 그런 다음 Javascript로 디코딩 할 수 있습니다.

Answer 2

내가 아는 두 가지 방법으로 로컬 파일에 액세스 할 수 있습니다. 첫 번째 방법은 사용자가 파일을 페이지로 끌어다 놓고 <input type="file"> 태그를 사용하는 것입니다.

document.getElementById('upload').addEventListener('change', eventHandler) 

: 당신이 입력에 change 이벤트에 대한 이벤트 리스너를 추가해야 할 것, 후자의 경우

addEventListener('dragover', function(e){e.preventDefault();}); 
addEventListener('drop', function(e) { 
    eventHandler.call(e.dataTransfer||e.clipboardData); 
    e.preventDefault(); 
}); 

:

전자의 경우, 다음을 수행해야합니다

그리고 모두를 위해, 당신은 기본 콜백 함수로이 있어야합니다 것 :

function eventHandler() { 
    var file = this.files[0]; //get the files 
    var reader = new FileReader(); //initiate reader 
    reader.onloadend = callbackFn; //set event handler 
    reader.readAsText(file); //initiate reading of files 
    if (this.id) { //only run if this is the input 
     var id = this.id; 
     this.outerHTML = this.outerHTML; //this resets the input 
     document.getElementById(id).addEventListener('change', eventHandler); //reattach event handler 
    } 
    function callbackFn(e) { 
     document.getElementById('output').value = e.target.result; //output it to a textarea 
    } 
} 

Here is a demo 당신이 그 안에 놓은 파일이나 입력에서 선택한 파일의 텍스트 내용 (메모장에서 열 때 표시되는 내용)이 텍스트 영역에 저장됩니다.

자세한 내용은 https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications을 참조하십시오.