Lecture du contenu des fichiers côté client en javascript dans divers navigateurs

J'essaie de fournir une solution de script uniquement pour lire le contenu d'un fichier sur une machine cliente via un navigateur.

J'ai une solution qui fonctionne avec Firefox et Internet Explorer. Ce n'est pas joli, mais j'essaye seulement des choses pour le moment:

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 :(";
    }
}

Je peux appeler getFileContents()et il écrira le contenu dans la fileContentszone de texte.

Existe-t-il un moyen de faire cela dans d'autres navigateurs?

Je suis plus préoccupé par Safari et Chrome pour le moment, mais je suis ouvert aux suggestions pour tout autre navigateur.

Edit: En réponse à la question "Pourquoi voulez-vous faire cela?":

Fondamentalement, je souhaite hacher le contenu du fichier avec un mot de passe à usage unique côté client afin de pouvoir renvoyer ces informations à titre de vérification.

Modifié pour ajouter des informations sur l'API File

Depuis que j'ai initialement écrit cette réponse, l' API de fichier a été proposée comme standard et implémentée dans la plupart des navigateurs (à partir d'IE 10, qui a ajouté la prise en charge de l' FileReaderAPI décrite ici, mais pas encore l' FileAPI). L'API est un peu plus compliquée que l'ancienne API Mozilla, car elle est conçue pour prendre en charge la lecture asynchrone des fichiers, une meilleure prise en charge des fichiers binaires et le décodage de différents encodages de texte. Il existe une documentation disponible sur le Mozilla Developer Network ainsi que divers exemples en ligne. Vous l'utiliseriez comme suit:

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";
    }
}

Réponse originale

Il ne semble pas y avoir de moyen de le faire dans WebKit (donc Safari et Chrome). Les seules clés d'un objet File sont fileNameet fileSize. Selon le message de validation pour le support File et FileList, ceux-ci sont inspirés de l'objet File de Mozilla , mais ils semblent ne prendre en charge qu'un sous-ensemble des fonctionnalités.

Si vous souhaitez changer cela, vous pouvez toujours envoyer un correctif au projet WebKit. Une autre possibilité serait de proposer l'API Mozilla à inclure dans HTML 5 ; la liste de diffusion WHATWG est probablement le meilleur endroit pour le faire. Si vous faites cela, il est beaucoup plus probable qu'il y ait un moyen multi-navigateurs de le faire, au moins dans quelques années. Bien sûr, soumettre un correctif ou une proposition d'inclusion à HTML 5 signifie un travail de défense de l'idée, mais le fait que Firefox l'implémente déjà vous donne quelque chose pour commencer.

Pour lire un fichier choisi par l'utilisateur, à l'aide d'une boîte de dialogue d'ouverture de fichier, vous pouvez utiliser la <input type="file">balise. Vous pouvez trouver des informations à ce sujet sur MSDN . Lorsque le fichier est choisi, vous pouvez utiliser l' API FileReader pour lire le contenu.

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>

Bon codage!
Si vous obtenez une erreur sur Internet Explorer, modifiez les paramètres de sécurité pour autoriser 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;
  }
 }