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

Question

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

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

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

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

210

javascript

Источник

user432731 27 авг '10 в 09:00

11 ответов

Другие вопросы по тегам javascript

user63011 10 окт '14 в 11:59 2014-10-10 11:59 · Answer 1 · 2014-10-10 11:59

Вот пример использования 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/

user125685 27 авг '10 в 09:16 2010-08-27 09:16 · Answer 2 · 2010-08-27 09:16

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

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

user6754742 10 июн '18 в 09:00 2018-06-10 09:00 · Answer 3 · 2018-06-10 09:00

Поскольку у меня нет жизни, и я хочу эти 4 очка репутации, чтобы я мог проявить свою любовь к людям, которые действительно хорошо умеют писать, я поделился своей адаптацией кода Paolo Moretti. Просто используйте openFile( функция, выполняемая с содержимым файла в качестве первого параметра ),

function dispFile(contents) {
  document.getElementById('contents').innerHTML=contents
}
function clickElem(elem) {
 // Thx user1601638 on Stack Overflow (6/6/2018 - https://stackru.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>

user1765710 03 авг '20 в 13:07 2020-08-03 13:07 · Answer 4 · 2020-08-03 13:07

Другие здесь предоставили для этого довольно подробный код. Возможно, в то время требовался более сложный код, я не знаю. В любом случае, я проголосовал за одну из них, но вот очень упрощенная версия, которая работает так же:

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>

user860099 18 апр '19 в 21:01 2019-04-18 21:01 · Answer 5 · 2019-04-18 21:01

Пытаться

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>

user2668869 30 авг '20 в 15:36 2020-08-30 15:36 · Answer 6 · 2020-08-30 15:36

Рассмотрите возможность переформатирования вашего файла в javascript. Тогда вы можете просто загрузить его, используя старый добрый...

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

5

Источник

user2668869 30 авг '20 в 15:36

user5038864 22 ноя '21 в 12:21 2021-11-22 12:21 · Answer 7 · 2021-11-22 12:21

Это не связано с "соображениями безопасности". И неважно, локальный он или файл на сетевом диске. Решением для ОС Windows может быть IIS - Internet Information Services , и вот некоторые детали:
Чтобы открыть файл в браузере с помощью Java Script window.open(), файл должен быть доступен на веб-сервере.
Создав виртуальный каталог на вашем IIS, который сопоставлен с любым физическим диском, вы сможете открывать файлы. Виртуальный каталог будет иметь некоторый http: адрес. Итак, вместо window.open("file:///D:/Hello.txt");
Вы будете писать window.open("http://iis-server/MY_VIRTUAL_DRIVE_D/Hello.txt");

user5306554 05 июл '21 в 18:12 2021-07-05 18:12 · Answer 8 · 2021-07-05 18:12

Вот как это сделать в машинописном тексте, если Blob достаточно хорош (нет необходимости преобразовывать в ByteArray / String через FileReader для многих случаев использования)

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

вот как это сделать в ванильном javascript

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

user2450701 04 июн '13 в 07:45 2013-06-04 07:45 · Answer 9 · 2013-06-04 07:45

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

user1969433 11 янв '13 в 09:09 2013-01-11 09:09 · Answer 10 · 2013-01-11 09:09

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.

user311017 27 авг '10 в 09:09 2010-08-27 09:09 · Answer 11 · 2010-08-27 09:09

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

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

-6

Источник

user311017 27 авг '10 в 09:09