Como abrir um ficheiro de disco local com o Javascript?

tentei abrir um ficheiro com

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

o navegador não permite abrir um ficheiro local desta forma, provavelmente por razões de segurança. Quero usar os dados do ficheiro no lado do cliente. Como posso ler o ficheiro local em Javascript?

 119
Author: dda, 2010-08-27

6 answers

Aqui está um exemplo usando 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>

Specs

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

Compatibilidade do navegador

  • IE 10+
  • Firefox 3.6+
  • cromato 13 +
  • Safari 6, 1+

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

 188
Author: Paolo Moretti, 2017-06-24 00:46:18

A instalação HTML5 fileReader permite-lhe processar os ficheiros locais, mas estes têm de ser seleccionados pelo Utilizador, não poderá ir pesquisar sobre o disco de utilizadores à procura de ficheiros.

Eu actualmente uso isto com versões de desenvolvimento do Chrome (6.x). Não sei que outros navegadores apoiam.

 56
Author: HBP, 2013-03-22 03:48:36

Porque eu não tenho vida e eu quero esses 4 pontos de reputação para que eu possa mostrar meu amor para (upvote respostas por) pessoas que são realmente bons em codificação eu compartilhei a minha adaptação do código de Paolo Moretti . Basta usar openFile(função a executar com o conteúdo do ficheiro como primeiro parâmetro).

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>
 6
Author: SignatureSmileyfaceProductions, 2018-06-10 09:00:12

O Javascript não pode normalmente aceder a ficheiros locais em novos navegadores, mas o objecto XMLHttpRequest pode ser usado para ler ficheiros. Então é realmente Ajax (e não Javascript) que está lendo o arquivo.

Se quiser ler o ficheiro abc.txt, pode escrever o código como:

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

Agora txt contém o conteúdo do ficheiro abc.txt.

 -1
Author: Karanpreet Singh, 2014-03-14 10:07:41

O método de requisição do xmlhttp não é válido para os ficheiros no disco local porque a segurança do navegador não nos permite fazê-lo.Mas podemos anular a segurança do navegador criando um atalho - >botão direito - >Propriedades no alvo"... localização do navegador.o exe " adiciona -- allow-file-access-from-files.Isto é testado no chrome,no entanto cuidado deve ser tomado para que todas as janelas do navegador devem ser fechadas e o código deve ser executado a partir do navegador aberto através deste atalho.

 -2
Author: user2450701, 2013-06-04 07:45:09
Novos navegadores como Firefox, Safari, etc. bloqueia o protocolo "ficheiro". Só funcionará em navegadores antigos. Terás de carregar os ficheiros que quiseres.
 -4
Author: Youssef, 2013-03-22 03:49:15