API de fichier

Internet Explorer 10 et les applications du Windows Store en JavaScript introduisent la prise en charge de l’API de fichier. L’API de fichier est une ébauche de spécification de W3C (World Wide Web Consortium) concernant la représentation des objets fichier dans les applications Web, ainsi que leur sélection par programme et l’accès à leurs données. L’API de fichier est en cours de normalisation par le W3C Web Applications Working Group. En utilisant l’API de fichier, les développeurs Web bénéficient d’un accès sécurisé aux fichiers locaux sur l’ordinateur client sans avoir besoin d’extensions ou de plug-ins.

Des téléchargements de fichiers fiables

L’API de fichier permet à un navigateur ou à une application de lire et de manipuler des fichiers, mais uniquement si l’utilisateur fournit les autorisations nécessaires pour réaliser ces opérations. En outre, l’API de fichier permet des téléchargements de fichiers plus fiables sans plug-ins.

Dans l’exemple d’API de fichier W3C suivant, différents blocs de code traitent les conditions de progression, d’erreur et de réussite :


function startRead() {
  // Obtain input element through DOM.

  var file = document.getElementById('file').files[0];
  if(file) {
    getAsText(file);
  }
}

function getAsText(readFile) {

  var reader = new FileReader();

  // Read file into memory as UTF-16      
  reader.readAsText(readFile, "UTF-16");

  // Handle progress, success, and errors
  reader.onprogress = updateProgress;
  reader.onload = loaded;
  reader.onerror = errorHandler;
}

function updateProgress(evt) {
  if (evt.lengthComputable) {
    // evt.loaded and evt.total are ProgressEvent properties.
    var loaded = (evt.loaded / evt.total);

    if (loaded < 1) {
      // Increase the progress bar length.
      // style.width = (loaded * 200) + "px";
    }
  }
}

function loaded(evt) {  
  // Obtain the read file data.    
  var fileString = evt.target.result;

// Handle UTF-16 file dump
  if(utils.regexp.isChinese(fileString)) {
    //Chinese Characters + name validation.
  }
  else {
    // Run other charset test.
  }
  // xhr.send(fileString)     
}

function errorHandler(evt) {
  if(evt.target.error.name == "NotReadableError") {
    // The file could not be read.
  }
}


Constructeur Blob

Le constructeur Blob permet à un développeur Web de créer ou manipuler un objet Blob (qui est en général équivalent à un fichier) directement sur le client. Le constructeur est défini dans la spécification File API du W3C. Cette spécification est actuellement en phase d’ébauche.

Dans les versions antérieures de la spécification File API, vous pouviez lire les fichiers, mais pas les modifier directement sur le client. Vous pouviez apporter des modifications à une représentation d’un fichier. En revanche, pour enregistrer ces modifications, vous deviez charger le fichier et les modifications vers un serveur en vue de leur traitement, puis télécharger le fichier modifié. Avec le constructeur Blob, vous pouvez facilement créer un objet Blob à partir d’un tableau. Le tableau peut contenir d’autres objets Blob, des chaînes de caractères ou des mémoires tampons de tableau. Il doit être passé à l’objet Blob en tant que paramètre au moment de sa création.

Il est possible d’ajouter un objet Dictionary facultatif comme autre paramètre, lequel peut définir les membres type et/ou endings.

L’exemple suivant (pour Internet Explorer 10 ou version ultérieure) décrit brièvement ce processus :


<!DOCTYPE html>
<html>

<head>
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
  <title>Saving Files Locally</title>
</head>

<body>
  <h1>Saving Files Locally</h1>
  <script>
    //check for Blob availability
    if (typeof Blob !== "undefined") {
      demoBlobs();
    } else {
      //your fallback code here
    }

    function demoBlobs(){  
      //create a Blob with an array and the optional dictionary object.
      var blob1 = new Blob(
        ["There are 10 kinds of people ", "in the world.\r\n"], //array
        { type: "text/plain", endings: "native" } //dictionary object
      );

      //create a second blob that uses the first blob in its array
      var blob2 = new Blob([blob1, "Those who understand binary and those who don't."]);

      // Save the blob1 content to a file, giving just a "Save" option
      window.navigator.msSaveBlob(blob1, 'msSaveBlob_testFile.txt'); 
      alert('File saved using msSaveBlob() - note the single "Save" button below.');
  
      // Save the blob2 content to a file, giving both "Save" *and* "Open" options
      window.navigator.msSaveOrOpenBlob(blob2, 'msSaveBlobOrOpenBlob_testFile.txt'); 
      alert('File saved using msSaveOrOpenBlob() - note the two "Open" and "Save" buttons below.');
    }
  </script>
</body>

</html>


Avec les méthodes msSaveBlob() et msSaveOrOpenBlob(), l’utilisateur peut enregistrer l’objet Blob sur son ordinateur comme s’il s’agissait d’un fichier téléchargé à partir du Web. Chaque fichier est enregistré dans le dossier Téléchargements par défaut.

La différence entre les deux méthodes msSaveBlob() et msSaveOrOpenBlob() est que la méthode msSaveBlob() ne propose qu’un bouton Enregistrer à l’utilisateur. La méthode msSaveOrOpenBlob() fournit un bouton Ouvrir en plus du bouton Enregistrer. Cela vous paraîtra plus clair en exécutant l’exemple de code ci-dessus dans Internet Explorer 10 ou une version ultérieure.

Autres améliorations

D’autres améliorations liées aux fichiers comprennent notamment les téléchargements de plusieurs fichiers (4 Go par fichier) avec le filtrage du type de fichier. Dans l’exemple suivant, l’utilisateur peut sélectionner plusieurs fichiers GIF (Graphics Interchange Format) ou JPEG :


<input type="file" name="pic" multiple accept="image/gif, image/jpeg" />

Pour plus d’informations, voir la section "File Upload state (type=file)" de la spécification HTML5.

Informations de référence sur les API

File API

Exemples et didacticiels

Comment gérer des fichiers locaux

Démonstrations du site Internet Explorer Test Drive

BlobBuilder
Binary File Inspector

Billets IEBlog

Nouveau constructeur Blob dans IE10
Création de fichiers avec BlobBuilder
HTML5, ce qui est prêt et ce qui ne l’est pas
Utilisation de données binaires à l’aide de tableaux typés

Spécification

API de fichier

Rubriques connexes

Téléchargement avec l’API de fichier

 

 

Afficher:
© 2014 Microsoft