JavaScript를 사용하여 로컬 파일 읽기

Question

그래서 "file : //"프로토콜을 사용하여 로컬로 액세스하는 "index.html"파일을 가지고 있습니다. (그래서 "http : //"프로토콜이 아닙니다.) 나는 별도의 프로그램에 의해 계속 변경되는 동일한 디렉토리에서 "data.txt"파일에 액세스해야하지만, 파일 프로토콜을 사용하고 있으므로 보안상의 이유로 파일에 대한 액세스가 거부됩니다.

로컬 파일을 읽으려면 어떻게해야합니까? XAMPP 또는 WAMP를 사용하여 로컬 서버를 실행하는 것을 생각했지만 추가 프로그램을 사용하지 않을 것입니다.

편집 : 사용자 상호 작용없이 작동해야하므로 입력 파일을 사용할 수 없습니다.

Answer 1

JavaScript는 클라이언트 측 렌더링 언어입니다. 일부 보안 문제 때문에 자바 스크립트로는 클라이언트 로컬 파일을 만질 수 없습니다. 대부분의 브라우저는 페이지가 로컬 파일 시스템에서 비롯된 경우에도 로컬 파일을 읽을 수 없습니다.

Answer 2

당신은 파일 API를 통해 그것을 할 수 있습니다 - https://www.w3.org/TR/file-upload/

아래 예제는 사용자의 선택의 이미지를 필터링, 파일에 reader.readAsDataURL()를 호출하고, 'SRC'속성을 설정하여 미리보기를 렌더링 데이터 URL에.

<style> 
 
    .thumb { 
 
    height: 75px; 
 
    border: 1px solid #000; 
 
    margin: 10px 5px 0 0; 
 
    } 
 
</style> 
 

 
<input type="file" id="files" name="files[]" multiple /> 
 
<output id="list"></output> 
 

 
<script> 
 
    function handleFileSelect(evt) { 
 
    var files = evt.target.files; // FileList object 
 

 
    // Loop through the FileList and render image files as thumbnails. 
 
    for (var i = 0, f; f = files[i]; i++) { 
 

 
     // Only process image files. 
 
     if (!f.type.match('image.*')) { 
 
     continue; 
 
     } 
 

 
     var reader = new FileReader(); 
 

 
     // Closure to capture the file information. 
 
     reader.onload = (function(theFile) { 
 
     return function(e) { 
 
      // Render thumbnail. 
 
      var span = document.createElement('span'); 
 
      span.innerHTML = ['<img class="thumb" src="', e.target.result, 
 
          '" title="', escape(theFile.name), '"/>'].join(''); 
 
      document.getElementById('list').insertBefore(span, null); 
 
     }; 
 
     })(f); 
 

 
     // Read in the image file as a data URL. 
 
     reader.readAsDataURL(f); 
 
    } 
 
    } 
 

 
    document.getElementById('files').addEventListener('change', handleFileSelect, false); 
 
</script>