¿Cómo abrir un archivo de disco local con Javascript?

Question

Traté de abrir archivo con

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

El navegador no permite abrir un archivo local de esta manera, probablemente por razones de seguridad. Quiero usar los datos del archivo en el lado del cliente. ¿Cómo puedo leer el archivo local en Javascript?

Answer 1

No puede. Nuevos navegadores como Firefox, Safari, etc. bloquean el protocolo 'file'. Solo funcionará en navegadores antiguos.

Tendrá que cargar los archivos que desea.

Answer 2

HTML5 fileReader facility le permite procesar archivos locales, pero estos DEBEN ser seleccionados por el usuario, no se puede ir en busca del archivo de los usuarios que buscan archivos.

Actualmente uso esto con las versiones de desarrollo de Chrome (6.x). No sé qué otros navegadores lo admiten.

Answer 3

Normalmente, Javascript no puede acceder a los archivos locales en los navegadores nuevos, pero el objeto XMLHttpRequest se puede usar para leer archivos. Entonces, en realidad es Ajax (y no Javascript) el que está leyendo el archivo.

Si desea leer el archivo abc.txt, puede escribir el 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(); 

ahora txt contiene el contenido del archivo abc.txt.

Answer 4

El método de solicitud xmlhttp no es válido para los archivos en el disco local porque la seguridad del navegador no nos permite hacerlo. Pero podemos anular la seguridad del navegador creando un acceso directo-> clic derecho-> propiedades en destino " ... ubicación del navegador path.exe "append --allow-file-access-from-files. Esto se prueba en Chrome, sin embargo, se debe tener cuidado de que todas las ventanas del navegador se cierren y el código se ejecute desde el navegador abierto. a través de este atajo.

Answer 5

Aquí hay un ejemplo 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>

---

Especificaciones

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

Compatibilidad del navegador

• IE 10+
• Firefox 3.6+
• Chrome 13+
• Safari 6.1+

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