Lectura de contenido de archivos en el lado del cliente en javascript en varios navegadores

Question

Estoy intentando proporcionar una solución de solo script para leer el contenido de un archivo en una máquina cliente a través de un navegador.

Tengo una solución que funciona con Firefox e Internet Explorer. No es bonito, pero yo sólo estoy tratando cosas en la actualidad

function getFileContents() { 
    var fileForUpload = document.forms[0].fileForUpload; 
    var fileName = fileForUpload.value; 

    if (fileForUpload.files) { 
     var fileContents = fileForUpload.files.item(0).getAsBinary(); 
     document.forms[0].fileContents.innerHTML = fileContents; 
    } else { 
     // try the IE method 
     var fileContents = ieReadFile(fileName); 
     document.forms[0].fileContents.innerHTML = fileContents; 
    } 
}  

function ieReadFile(filename) 
{ 
    try 
    { 
     var fso = new ActiveXObject("Scripting.FileSystemObject"); 
     var fh = fso.OpenTextFile(filename, 1); 
     var contents = fh.ReadAll(); 
     fh.Close(); 
     return contents; 
    } 
    catch (Exception) 
    { 
     return "Cannot open file :("; 
    } 
} 

puedo llamar getFileContents() y que va a escribir el contenido en el área de fileContents texto.

¿Hay alguna manera de hacer esto en otros navegadores?

Estoy más preocupado con Safari y Chrome por el momento, pero estoy abierto a sugerencias para cualquier otro navegador.

Editar: En respuesta a la pregunta: "¿Por qué quieres hacer esto?":

Básicamente, quiero para discutir el contenido del archivo junto con una sola vez la contraseña en el lado del cliente entonces puedo enviar esta información de vuelta como una verificación.

Answer 1

Editado para añadir información sobre la API de archivos

Desde que originalmente escribí esta respuesta, la File API se ha propuesto como un estándar y implemented in most browsers (a partir de IE 10, que añade soporte para FileReader API describe aquí, aunque aún no es la API File). La API es un poco más complicada que la anterior API de Mozilla, ya que está diseñada para admitir lectura asíncrona de archivos, mejor soporte para archivos binarios y decodificación de diferentes codificaciones de texto. Hay some documentation available on the Mozilla Developer Network y various examples online. Se podría utilizar la siguiente manera:

var file = document.getElementById("fileForUpload").files[0]; 
if (file) { 
    var reader = new FileReader(); 
    reader.readAsText(file, "UTF-8"); 
    reader.onload = function (evt) { 
     document.getElementById("fileContents").innerHTML = evt.target.result; 
    } 
    reader.onerror = function (evt) { 
     document.getElementById("fileContents").innerHTML = "error reading file"; 
    } 
} 

Respuesta original

No parece ser una manera de hacer esto en WebKit (por lo tanto, Safari y Chrome). Las únicas claves que tiene un objeto File son fileName y fileSize. De acuerdo con commit message para la compatibilidad con File y FileList, estos están inspirados en Mozilla's File object, pero parecen admitir solo un subconjunto de las características.

Si desea cambiar esto, siempre puede send a patch al proyecto WebKit. Otra posibilidad sería proponer la API de Mozilla para su inclusión en HTML 5; la lista de correo WHATWG es probablemente el mejor lugar para hacerlo. Si haces eso, entonces es mucho más probable que haya una forma cruzada de hacer esto, al menos dentro de un par de años. Por supuesto, enviar un parche o una propuesta de inclusión a HTML 5 significa algo de trabajo para defender la idea, pero el hecho de que Firefox ya lo implemente le da algo para empezar.

Answer 2

Happy coding!
Si se produce un error en Internet Explorer, cambie la configuración de seguridad para permitir ActiveX

var CallBackFunction = function(content) 
{ 
    alert(content); 
} 
ReadFileAllBrowsers(document.getElementById("file_upload"), CallBackFunction); 

//Tested in Mozilla Firefox browser, Chrome 
function ReadFileAllBrowsers(FileElement, CallBackFunction) 
{ 
try 
{ 
    var file = FileElement.files[0]; 
    var contents_ = ""; 

    if (file) { 
     var reader = new FileReader(); 
     reader.readAsText(file, "UTF-8"); 
     reader.onload = function(evt) 
     { 
      CallBackFunction(evt.target.result); 
     } 
     reader.onerror = function (evt) { 
      alert("Error reading file"); 
     } 
    } 
} 
catch (Exception) 
{ 
    var fall_back = ieReadFile(FileElement.value); 
    if(fall_back != false) 
    { 
     CallBackFunction(fall_back); 
    } 
} 
} 

///Reading files with Internet Explorer 
function ieReadFile(filename) 
{ 
try 
{ 
    var fso = new ActiveXObject("Scripting.FileSystemObject"); 
    var fh = fso.OpenTextFile(filename, 1); 
    var contents = fh.ReadAll(); 
    fh.Close(); 
    return contents; 
} 
catch (Exception) 
    { 
    alert(Exception); 
    return false; 
    } 
} 

Answer 3

Para poder leer un archivo seleccionado por el usuario, utilizando un cuadro de diálogo de apertura de archivo, puede utilizar la etiqueta <input type="file">. Puede encontrar information on it from MSDN.Cuando se elige el archivo, puede usar el FileReader API para leer los contenidos.

function onFileLoad(elementId, event) { 
 
    document.getElementById(elementId).innerText = event.target.result; 
 
} 
 

 
function onChooseFile(event, onLoadFileHandler) { 
 
    if (typeof window.FileReader !== 'function') 
 
     throw ("The file API isn't supported on this browser."); 
 
    let input = event.target; 
 
    if (!input) 
 
     throw ("The browser does not properly implement the event object"); 
 
    if (!input.files) 
 
     throw ("This browser does not support the `files` property of the file input."); 
 
    if (!input.files[0]) 
 
     return undefined; 
 
    let file = input.files[0]; 
 
    let fr = new FileReader(); 
 
    fr.onload = onLoadFileHandler; 
 
    fr.readAsText(file); 
 
}

<input type='file' onchange='onChooseFile(event, onFileLoad.bind(this, "contents"))' /> 
 
<p id="contents"></p>