Как открыть файл локального диска с помощью JavaScript?

Ответ 1

Вот пример, используя 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>

Ответ 2

средство HTML5 fileReader позволяет обрабатывать локальные файлы, но они ДОЛЖНЫ быть выбраны пользователем, вы не можете обманывать пользователей диск ищет файлы.

В настоящее время я использую это с версиями разработки Chrome (6.x). Я не знаю, что поддерживают другие браузеры.

Ответ 3

Поскольку у меня нет жизни, и я хочу эти 4 очка репутации, чтобы я мог проявить свою любовь к людям, которые действительно хорошо умеют писать, я поделился своей адаптацией кода Паоло Моретти. Просто используйте 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>

Ответ 4

Попробуйте

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>

Ответ 5

Метод запроса xmlhttp недействителен для файлов на локальном диске, потому что безопасность браузера не позволяет нам это делать. Но мы можем переопределить безопасность браузера, создав ярлык- > право-щелчок- > свойства в целевом "... browser location path.exe" append --allow-file-access-from-files.This проверяется на chrome, однако следует позаботиться о том, чтобы все окна браузера были закрыты, а код должен запускаться из браузера, открытого через этот ярлык.

Ответ 6

Вы не можете. Новые браузеры, такие как Firefox, Safari и т.д. Блокируют протокол "файл". Он будет работать только в старых браузерах.

Вам нужно будет загрузить нужные файлы.

Ответ 7

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

Теперь txt содержит содержимое файла abc.txt.