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?
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+
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.
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>
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.
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.