web-dev-qa-db-fra.com

Lecture du contenu du fichier côté client en javascript dans différents navigateurs

Je tente de fournir une solution de script uniquement pour lire le contenu d'un fichier sur un ordinateur client via un navigateur.

J'ai une solution qui fonctionne avec Firefox et Internet Explorer. Ce n'est pas joli, mais je ne fais qu'essayer des choses en ce 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 zone de texte fileContents.

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

Je suis surtout concerné 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?":

En gros, 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.

javascripthtmlfile-iosandbox
86
Damovisa

Édité pour ajouter des informations sur l'API de fichier

Depuis que j'ai écrit cette réponse, le File API a été proposé comme standard et implémenté dans la plupart des navigateurs (à partir de IE 10, qui a ajouté la prise en charge de l'API FileReader décrite ici, bien que pas encore l'API File. L'API est un peu plus compliquée que l'ancienne API de Mozilla, car elle est conçue pour prendre en charge la lecture asynchrone des fichiers. , meilleure prise en charge des fichiers binaires et du décodage de différents codages de texte. Il existe ne documentation disponible sur le réseau de développeurs Mozilla ainsi que divers exemples en ligne, que vous 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 faire cela dans WebKit (donc, Safari et Chrome). Les seules clés d'un objet File sont fileName et fileSize. Selon le message de validation pour le support File et FileList, ceux-ci sont inspirés par 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 patch au projet WebKit. Une autre possibilité serait de proposer l’introduction de l’API de Mozilla dans HTML 5 ; La liste de diffusion WHATWG est probablement le meilleur endroit pour le faire. Si vous faites cela, alors 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, le fait de soumettre un correctif ou une proposition d’inclusion à HTML 5 implique certes quelques efforts pour défendre l’idée, mais le fait que Firefox l’implémente déjà vous donne un point de départ.

120
Brian Campbell

Pour lire un fichier choisi par l'utilisateur, à l'aide d'une boîte de dialogue d'ouverture de fichier, vous pouvez utiliser le fichier <input type="file"> tag. Vous pouvez trouver informations sur MSDN à ce sujet . Lorsque le fichier est choisi, vous pouvez utiliser le FileReader API 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>
17
cdiggins

Bonne 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;
  }
 }
2
Mnyikka