JavaScript Lire le fichier en tant que dataURL


Exemple

La lecture du contenu d'un fichier dans une application Web peut être réalisée à l'aide de l'API de fichier HTML5. Tout d'abord, ajoutez une entrée avec type="file" dans votre code HTML:

<input type="file" id="upload">

Ensuite, nous allons ajouter un écouteur de modification sur l'entrée de fichier. Cet exemple définit l'écouteur via JavaScript, mais il pourrait également être ajouté en tant qu'attribut sur l'élément d'entrée. Cet écouteur est déclenché chaque fois qu'un nouveau fichier a été sélectionné. Dans ce rappel, nous pouvons lire le fichier sélectionné et effectuer d'autres actions (comme la création d'une image avec le contenu du fichier sélectionné):

document.getElementById('upload').addEventListener('change', showImage);

function showImage(evt) {
    var files = evt.target.files;

    if (files.length === 0) {
        console.log('No files selected');
        return;
    }

    var reader = new FileReader();
    reader.onload = function(event) {
        var img = new Image();
        img.onload = function() {
            document.body.appendChild(img);
        };
        img.src = event.target.result;
    };
    reader.readAsDataURL(files[0]);
}