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

Question

Я пытался открыть файл с

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

Браузер не позволяет открывать локальный файл таким образом, возможно, из соображений безопасности. Я хочу использовать данные файла на стороне клиента. Как я могу прочитать локальный файл в JavaScript?

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

Contents of the file:

---

Характеристики

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

Совместимость с браузерами

• IE 10 +
• Firefox 3.6 +
• Chrome 13 +
• Safari 6.1 +

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

Answer 2

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

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

Answer 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.
Open a file

Answer 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(e) {
  msg.innerText = await readFile(e.target.files[0]);
}

Content:

Answer 5

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

Answer 6

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.

Answer 7

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

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