JavaScript로 로컬 디스크 파일을 여는 방법은 무엇입니까?

JavaScript로 로컬 디스크 파일을 여는 방법은 무엇입니까?

---

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

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 - https://stackoverflow.com/questions/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. 크롬에서 테스트되지만 모든 브라우저 창을 닫고이 바로 가기를 통해 열린 브라우저에서 코드를 실행해야합니다.

---

You can't. New browsers like Firefox, Safari etc. block the 'file' protocol. It will only work on old browsers.

You'll have to upload the files you want.

---

Javascript cannot typically access local files in new browsers but the XMLHttpRequest object can be used to read files. So it is actually Ajax (and not Javascript) which is reading the file.

If you want to read the file abc.txt, you can write the code as:

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();

Now txt contains the contents of the file abc.txt.

참고URL : https://stackoverflow.com/questions/3582671/how-to-open-a-local-disk-file-with-javascript