나는 파일을 열려고 시도했다.

window.open("file:///D:/Hello.txt");

브라우저는 아마도 보안상의 이유로 로컬 파일을 이런 방식으로 열 수 없습니다. 클라이언트 측에서 파일 데이터를 사용하고 싶습니다. JavaScript로 로컬 파일을 읽으려면 어떻게해야합니까?

답변

다음은 다음을 사용하는 예입니다 FileReader.

function readSingleFile(e) {
  var file = e.target.files[0];
  if (!file) {
    return;
  }
  var reader = new FileReader();
  reader.onload = function(e) {
    var contents = e.target.result;
    displayContents(contents);
  };
  reader.readAsText(file);
}

function displayContents(contents) {
  var element = document.getElementById('file-content');
  element.textContent = contents;
}

document.getElementById('file-input')
  .addEventListener('change', readSingleFile, false);

<input type="file" id="file-input" />
<h3>Contents of the file:</h3>
<pre id="file-content"></pre>

스 니펫 확장

명세서

http://dev.w3.org/2006/webapi/FileAPI/

브라우저 호환성

IE 10 이상
Firefox 3.6 이상
크롬 13+
사파리 6.1 이상

http://caniuse.com/#feat=fileapi

답변

HTML5을 FileReader 시설은 로컬 파일을 처리 할 수 있도록 않지만, 다음은, 당신은 파일을 찾는 사용자의 디스크에 대한 응원을 갈 수 없어 사용자가 선택해야합니다.

현재 Chrome (6.x) 개발 버전에서이 기능을 사용하고 있습니다. 다른 브라우저에서 어떤 브라우저를 지원하는지 모르겠습니다.

답변

나는 삶이없고 그 4 가지 평판 포인트를 원하기 때문에 실제로 코딩에 능숙한 사람들에게 내 사랑을 보여줄 수 있기 때문에 나는 Paolo Moretti 의 코드에 대한 나의 적응을 공유했습니다 . openFile(첫 번째 매개 변수로 파일 내용으로 실행되는 기능을 사용 하십시오) .

function dispFile(contents) {
  document.getElementById('contents').innerHTML=contents
}
function clickElem(elem) {
	// Thx user1601638 on Stack Overflow (6/6/2018 - /programming/13405129/javascript-create-and-save-file )
	var eventMouse = document.createEvent("MouseEvents")
	eventMouse.initMouseEvent("click", true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null)
	elem.dispatchEvent(eventMouse)
}
function openFile(func) {
	readFile = function(e) {
		var file = e.target.files[0];
		if (!file) {
			return;
		}
		var reader = new FileReader();
		reader.onload = function(e) {
			var contents = e.target.result;
			fileInput.func(contents)
			document.body.removeChild(fileInput)
		}
		reader.readAsText(file)
	}
	fileInput = document.createElement("input")
	fileInput.type='file'
	fileInput.style.display='none'
	fileInput.onchange=readFile
	fileInput.func=func
	document.body.appendChild(fileInput)
	clickElem(fileInput)
}

Click the button then choose a file to see its contents displayed below.
<button onclick="openFile(dispFile)">Open a file</button>
<pre id="contents"></pre>

스 니펫 확장

답변

시험

function readFile(file) {
  return new Promise((resolve, reject) => {
    let fr = new FileReader();
    fr.onload = x=> resolve(fr.result);
    fr.readAsText(file);
})}

하지만 사용자는 파일을 선택하기 위해 조치를 취해야합니다

코드 스 니펫 표시

function readFile(file) {
  return new Promise((resolve, reject) => {
    let fr = new FileReader();
    fr.onload = x=> resolve(fr.result);
    fr.readAsText(file);
})}

async function read(input) {
  msg.innerText = await readFile(input.files[0]);
}

<input type="file" onchange="read(this)"/>
<h3>Content:</h3><pre id="msg"></pre>

스 니펫 확장

답변

브라우저 보안은 그렇게 할 수 없기 때문에 xmlhttp 요청 메소드는 로컬 디스크의 파일에 유효하지 않습니다. location path.exe “append –allow-file-access-from-files. 크롬에서 테스트되지만 모든 브라우저 창을 닫고이 바로 가기를 통해 열린 브라우저에서 코드를 실행해야합니다.

답변

당신은 할 수 없습니다. Firefox, Safari 등과 같은 새로운 브라우저는 ‘파일’프로토콜을 차단합니다. 오래된 브라우저에서만 작동합니다.

원하는 파일을 업로드해야합니다.

답변

Javascript는 일반적으로 새 브라우저에서 로컬 파일에 액세스 할 수 없지만 XMLHttpRequest 객체를 사용하여 파일을 읽을 수 있습니다. 따라서 실제로 파일을 읽는 것은 Ajax (Javascript 아님)입니다.

파일을 읽으려면 다음 abc.txt과 같이 코드를 작성할 수 있습니다.

var txt = '';
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function(){
  if(xmlhttp.status == 200 && xmlhttp.readyState == 4){
    txt = xmlhttp.responseText;
  }
};
xmlhttp.open("GET","abc.txt",true);
xmlhttp.send();

이제 txtabc.txt 파일의 내용이 들어 있습니다.