Comment JavaScript peut-il lire le contenu des fichiers locaux dans différents navigateurs ?

Lecture du contenu du fichier côté client en JavaScript dans divers navigateurs

Pour tenter de lire le contenu du fichier à partir d'un ordinateur client à l'aide d'un navigateur, un script uniquement La solution a été développée pour Firefox et Internet Explorer. La solution exploite l'API File pour Firefox et un ActiveXObject pour Internet Explorer.

API File pour Firefox

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

ActiveXObject pour 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)
    {
        return "Cannot open file :(";
    }
}

Cross-Browser Assistance

Cependant, il n'existe aucun moyen connu d'effectuer cette tâche dans d'autres navigateurs, tels que Safari et Chrome, en utilisant les méthodes ci-dessus. L'API File, telle qu'implémentée dans ces navigateurs, fournit uniquement un accès au nom et à la taille du fichier, sans la possibilité de lire le contenu.

Mise à jour de l'API File

Le fichier L'API a depuis été standardisée et implémentée dans la plupart des navigateurs modernes, y compris IE 10 et versions ultérieures. Cette API prend en charge la lecture de fichiers asynchrones, la gestion des fichiers binaires et le décodage de l'encodage de texte.

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

Proposition WebKit et HTML 5

Alternativement, si vous le souhaitez, vous pouvez soumettre un correctif ou proposer l'API Mozilla pour inclusion dans HTML 5, augmentant ainsi la probabilité d'une compatibilité entre navigateurs à l'avenir.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!