자바스크립트로 로컬 디스크 파일을 여는 방법은?

자바스크립트로 로컬 디스크 파일을 여는 방법은?

파일을 열려고 했습니다.

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

브라우저에서는 보안상의 이유로 로컬 파일을 열 수 없습니다.나는 클라이언트 측에서 파일의 데이터를 사용하고 싶습니다.자바스크립트로 로컬 파일을 읽으려면 어떻게 해야 합니까?

다음은 사용 예입니다.

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+
• 파이어폭스 3.6+
• 크롬 13+
• Safari 6.1+

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

HTML5 fileReader 기능을 사용하면 로컬 파일을 처리할 수 있지만 사용자가 이 파일을 선택해야 하므로 파일을 찾는 사용자 디스크를 루팅할 수 없습니다.

저는 현재 이것을 크롬(6.x) 개발 버전과 함께 사용하고 있습니다.다른 브라우저에서 지원하는 것이 무엇인지 모르겠습니다.

왜냐하면 저는 삶이 없고 실제로 코딩을 잘하는 사람들에게 제 사랑을 보여줄 수 있도록 (답변에 찬성하는) 그 네 가지 평판 포인트를 원하기 때문입니다. 저는 파올로 모레티의 코드를 각색한 것을 공유했습니다.그냥 사용하기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>

여기에 있는 다른 사람들은 이것에 대해 꽤 정교한 코드를 제공했습니다.아마도 그 당시에는 더 정교한 코드가 필요했을 것입니다, 저는 모릅니다.어쨌든, 저는 그 중 하나를 지지했지만, 여기 동일하게 작동하는 매우 단순한 버전이 있습니다.

function openFile() {
  document.getElementById('inp').click();
}
function readFile(e) {
  var file = e.target.files[0];
  if (!file) return;
  var reader = new FileReader();
  reader.onload = function(e) {
    document.getElementById('contents').innerHTML = e.target.result;
  }
  reader.readAsText(file)
}

Click the button then choose a file to see its contents displayed below.
<button onclick="openFile()">Open a file</button>
<input id="inp" type='file' style="visibility:hidden;" onchange="readFile(event)" />
<pre id="contents"></pre>

파일을 Javascript로 다시 포맷해 보십시오.그런 다음 오래된 것을 사용하여 간단히 적재할 수 있습니다.

<script src="thefileIwantToLoad.js" defer></script>

이는 "보안상의 이유"와 관련이 없으며 네트워크 드라이브의 로컬 또는 파일 여부는 중요하지 않습니다.Windows OS에 대한 솔루션은 IIS - 인터넷 정보 서비스일 수 있으며 다음은 몇 가지 세부 정보입니다.
Java Script window.open()으로 브라우저에서 파일을 열려면 WEB 서버에서 파일을 사용할 수 있어야 합니다.
물리적 드라이브에 매핑된 가상 디렉터리를 IIS에 생성하면 파일을 열 수 있습니다.가상 디렉터리에 일부 http: 주소가 있습니다.그래서 대신에 window.open("file:///D:/Hello.txt");
당신은 쓸 것입니다.window.open("http://iis-server/MY_VIRTUAL_DRIVE_D/Hello.txt");

다음은 Blob이 충분히 우수한 경우 유형 스크립트로 수행하는 방법입니다(많은 사용 사례에서 FileReader를 통해 ByteArray/String으로 변환할 필요 없음).

function readFile({
  fileInput,
}: {
  fileInput: HTMLInputElement;
}): Promise<ArrayLike<Blob>> {
  return new Promise((resolve, reject) => {
    fileInput.addEventListener("change", () => {
      resolve(fileInput.files);
    });
  });
}

바닐라 자바스크립트로 하는 방법이 여기 있습니다.

function readFile({
  fileInput,
}) {
  return new Promise((resolve, reject) => {
    fileInput.addEventListener("change", () => {
      resolve(fileInput.files);
    });
  });
}

xmlhttp 요청 방법은 브라우저 보안에서 허용하지 않기 때문에 로컬 디스크의 파일에 대해 유효하지 않습니다.그러나 바로 가기->오른쪽 클릭->속성 대상 "...브라우저 위치 경로.exe"에 --allow-file-access-from-files를 추가하여 브라우저 보안을 재정의할 수 있습니다.이 테스트는 크롬에서 수행되지만 모든 브라우저 창을 닫고 이 바로 가기를 통해 열린 브라우저에서 코드를 실행하도록 주의해야 합니다.

그럴수는 없어요.Firefox, Safari 등과 같은 새로운 브라우저는 '파일' 프로토콜을 차단합니다.이전 브라우저에서만 작동합니다.

당신은 당신이 원하는 파일을 업로드해야 할 것입니다.

Javascript는 일반적으로 새 브라우저에서 로컬 파일에 액세스할 수 없지만 XMLHttpRequest 개체를 사용하여 파일을 읽을 수 있습니다.따라서 파일을 읽고 있는 것은 사실 Ajax(자바스크립트가 아닌)입니다.

당신이 파일을 ,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();

지금이다txt◦ abctxt 파일의 내용이 들어 있습니다.

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