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

155

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

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

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

Джовал
источник

Ответы:

238

Вот пример использования 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+
  • Chrome 13+
  • Safari 6.1+

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

Паоло Моретти
источник
1
Всего одна секунда, когда я перезагружаю тот же самый последний файл, содержимое не меняется (я говорю о его содержимом, когда я редактирую текст файла). Вы можете помочь?
Гидропер
1
@ SamusHands Да, вы правы, я могу воспроизвести проблему в Safari и Chrome (она отлично работает в Firefox). Установка значения входа для nullкаждого onClickсобытия должна помочь, см .: stackoverflow.com/a/12102992/63011
Paolo Moretti
3
Это хороший пример FileReader, но комментарий к displayContentsвышесказанному: обратите внимание, что innerHTMLподобная настройка для ненадежного контента может быть уязвимостью безопасности. (Чтобы убедиться в этом, создайте bad.txtнечто подобное <img src="/nonexistent" onerror="alert(1);">и убедитесь, что предупреждение выполняется - это может быть более вредоносный код.)
ShreevatsaR
2
@ShreevatsaR действительно хорошая мысль. Мой фрагмент - всего лишь пример, но вы правы, он не должен пропагандировать плохие привычки безопасности. Я заменил innerHTMLна textContent. Спасибо за ваш комментарий.
Паоло Моретти
1
@TeylerHalama Вы также можете использовать DOMContentLoadedсобытие для этого.
Паоло Моретти
59

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

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

НВР
источник
3
Да, теперь это возможно с HTML5. Смотрите здесь
Флавиен Волкен
1
Быстрое сканирование указанной спецификации (последнее обновление 2012-07-12) не показывает никаких возможностей для записи в файл, только для чтения.
HBP
26

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

SignatureSmileyfaceProductions
источник
2
Спасибо, было полезно. Обратите внимание, что вместо того кода, который у вас есть clickElem(), вы можете просто позвонить fileInput.click(). (по крайней мере, в последней версии Chrome)
Venryx
6

Пытаться

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

но пользователь должен принять меры, чтобы выбрать файл

Камил Келчевски
источник
Я только что увидел msg.innerText и впервые узнал, что некоторые элементы, идентифицированные с помощью идентификаторов, могут быть доступны с использованием идентификаторов в качестве имен переменных или свойств объекта окна.
Фмалина
так что ответ мы не можем . HTML кажется идеальным для взаимодействия с документами! но не все можно обслужить. Локальный доступ к файлам был бы хорош
Yota
@yota - браузер заставляет пользователя взаимодействовать (и быть осведомленным), вероятно, из-за соображений безопасности
Камиль Килчевски
-4

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

user2450701
источник
-7

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

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

Юсеф
источник
-9

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.

Каранприт Сингх
источник
61
Аякс это JavaScript.
Маффин Man
4
@TheMuffinMan и XML. (Асинхронный Javascript и XML)
Quintec
9
Этот ответ не имеет значения, поскольку операционная система спросила, как открыть файлы, которые находятся на стороне клиента, а не файлы, которые находятся на сервере.
Томас Нгуен
4
@ThomasNguyen, этот вопрос является первым результатом Google "javascript open file", и этот ответ, тем не менее, полезен.
Натан Гоингс
@ThomasNguyen Я согласен, но возможный обходной путь без FileReader мог бы состоять в том, чтобы загрузить файл на сервер и прочитать его оттуда. Тем не менее я понизил этот ответ.
inf3rno