Як відкрити файл локального диска за допомогою 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+
  • Сафарі 6.1+

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


1
Лише через одну секунду, коли я перезавантажую той самий останній файл, вміст не змінюється (я кажу про його вміст, коли редагую текст файлу). Ви можете допомогти?
Hydroper

1
@SamusHands Так, ви маєте рацію, я можу відтворити проблему в Safari та Chrome (це чудово працює у Firefox). Встановлення значення вхідних даних для nullкожної onClickподії повинно зробити трюк, див .: stackoverflow.com/a/12102992/63011
Паоло Моретті

3
Це добре, як приклад FileReader, але коментар до displayContentsсказаного: зауважте, що таке налаштування innerHTMLз недовірливим вмістом може бути вразливим для безпеки. (Щоб переконатися в цьому, створіть таке, bad.txtщо містить щось подібне, <img src="/nonexistent" onerror="alert(1);">і побачите, що сповіщення виконується - це може бути і більше шкідливий код.)
ShreevatsaR

2
@ShreevatsaR дійсно вдалий момент. Мій фрагмент - лише приклад, але ви маєте рацію, він не повинен пропагувати погані звички до безпеки. Я замінив innerHTMLна textContent. Дякуємо за ваш коментар
Паоло Моретті

1
@TeylerHalama Ви також можете використовувати DOMContentLoadedподію для цього.
Паоло Моретті

59

The 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>


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 і вперше дізнався, що до деяких елементів, що ідентифікуються з ідентифікаторами, можна отримати доступ, використовуючи ідентифікатори як імена змінних або властивості об’єкта вікна.
fmalina

тому відповісти - ми не можемо . html здається таким ідеальним для взаємодії з документами! але не все можна подавати. Місцевий доступ до файлів був би непоганий
йота

@yota - браузер змушує користувача взаємодіяти (і бути в курсі), ймовірно, з міркувань безпеки
Каміль Кишевський

-4

Метод запиту xmlhttp недійсний для файлів на локальному диску, оскільки безпека браузера не дозволяє нам це робити. Але ми можемо перекрити безпеку браузера, створивши ярлик-> клацніть правою кнопкою миші>> властивості в цільовому "... браузері location path.exe "append --allow-file-access-from-files. Це тестується на хромі, однак слід подбати про те, щоб усі вікна браузера були закриті і код запускався з браузера, відкритого за допомогою цього ярлика.


-7

Ви не можете. Нові браузери, такі як Firefox, Safari тощо, блокують протокол "файл". Він працюватиме лише на старих браузерах.

Вам доведеться завантажити потрібні файли.


-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
Ajax - це JavaScript.
Людина-булочка

4
@TheMuffinMan і XML. (Asynchronus Javascript and XML)
Quintec

9
Ця відповідь не є актуальною, оскільки оператор запитував, як відкрити файли, які перебувають на клієнтській стороні, а не файли, які знаходяться на сервері.
Томас Нгуен

4
@ThomasNguyen, це питання є першим результатом Google "відкритого файлу javascript", і ця відповідь все-таки корисна.
Натан іде

@ThomasNguyen Я згоден, але можливим рішенням без FileReader може бути завантаження файлу на сервер і звідти його читання. І все ж я спростував цю відповідь.
inf3rno
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.