web-dev-qa-db-fra.com

Chrome FileReader

Quelqu'un peut-il me donner un exemple d'utilisation de l'API FileReader pour récupérer le contenu d'un fichier dans Chrome?

Il semble retourner undefined pour moi.

<!doctype html>
<html>
<script>
function handle_files(files) {
  console.log(files)
  reader = new FileReader()
  ret = []
  for (i = 0; i < files.length; i++) {
    file = files[i]
    console.log(file)
    text = reader.readAsText(file) //readAsdataURL
    console.log(text) //undefined
    ret.Push(text)
  }
  console.log(ret) // [undefined]

}
</script>
<body>
FileReader Test
<input type="file" onchange="handle_files(this.files)">
</body>
</html>
htmlgoogle-chromefilereader
27
Drew LeSueur

Mon problème était que je supposais que FileReader était synchrone. Voici la bonne façon de procéder. Si vous êtes sur Chrome, ce code doit être exécuté sur un serveur (localhost ou sur un site). Cela ne fonctionnera pas avec un fichier local.

<!doctype html>
<html>
<script>
function handle_files(files) {
  for (i = 0; i < files.length; i++) {
    file = files[i]
    console.log(file)
    var reader = new FileReader()
    ret = []
    reader.onload = function(e) {
      console.log(e.target.result)
    }
    reader.onerror = function(stuff) {
      console.log("error", stuff)
      console.log (stuff.getMessage())
    }
    reader.readAsText(file) //readAsdataURL
  }

}
</script>
<body>
FileReader that works!
<input type="file" multiple onchange="handle_files(this.files)">
</body>
</html>
33
Drew LeSueur

L'objet File API FileReader fonctionne de la même manière dans Chrome que dans FireFox, Opera ou Internet Explorer 10 (Yup, fonctionne dans IE ).

Exemple simple

Vous commencez par déclarer une nouvelle instance du lecteur:

var reader = new FileReader();

Définissez vos rappels pour ses différents événements :

reader.onloadend = function( ){
    document.body.style.backgroundImage = "url(" + this.result + ")";
}

Et puis passez-le quelque chose à lire:

reader.readAsDataURL( file );

Violon: http://jsfiddle.net/jonathansampson/K3A9r/

Gestion de plusieurs fichiers

Lorsque vous travaillez avec plusieurs fichiers, les choses sont un peu différentes. Bien qu'il soit clair que nous devons parcourir la liste de fichiers résultante, nous devons également utiliser une fermeture pour empêcher les données de fichier d'être altérées au cours de nombreuses itérations:

// Continue only if we have proper support
if ( window.FileReader ) {

  // Provide our logic upon the change even of our input
  document.getElementById("collection").onchange = function(){

    // Couple variables for handling each file
    var counter = -1, file;

    // Cycle over all files
    while ( file = this.files[ ++counter ] ) {

      // Create a reader for this particular file
      var reader = new FileReader();

      // Respond to the onloadend event of the reader
      reader.onloadend = (function(file){
        return function(){
          var image = new Image();
          image.height = 100;
          image.title = file.name;
          image.src = /^image/.test(file.type) ? this.result : "t9QlH.png";
          document.body.appendChild( image );
        }
      })(file);

      // Begin reading data for this file
      reader.readAsDataURL( file );
    }
  }
}​

Violon: http://jsfiddle.net/jonathansampson/jPTV3/

Détection des fonctionnalités

Bien que FileReader soit disponible dans presque tous les navigateurs modernes, vous devez toujours être sûr de ne pas provoquer de confusion pour les utilisateurs de navigateurs plus anciens. Avant d'utiliser FileReader, assurez-vous de vérifier la présence de l'objet fenêtre:

if ( window.FileReader ) {
    // Safe to use FileReader
}

Exécution locale, à partir de Chrome

Je dois noter que l'exécuter dans un fichier: /// chemin dans Chrome entraînera une expérience cassée. Par défaut, les versions actuelles de Chrome don ' t autoriser le fichier: /// pages à accéder à d'autres fichiers. Vous pouvez modifier ce comportement en chargeant Chrome avec le --allow-file-access-from-files drapeau.

enter image description here

Notez que cette méthode n'autorisera l'accès aux fichiers que pour les fichiers sur l'instance du navigateur avec lequel elle a été ouverte. Si vous souhaitez que ce soit le cas pour toutes les instances de navigateur à l'avenir, vous pouvez modifier le raccourci à partir de votre bureau. Cliquez simplement avec le bouton droit sur le raccourci Chrome, et accédez aux propriétés. Ensuite, ajoutez l'indicateur à la fin de la cible.

18
Sampson