Datei-API

Internet Explorer 10 und Windows Store-Apps mit JavaScript unterstützen jetzt die Datei-API. Die Datei-API ist eine W3C-Entwurfswebspezifikation (World Wide Web Consortium) für die Darstellung von Dateiobjekten in Webanwendungen sowie für deren programmgesteuerte Auswahl und den Zugriff auf ihre Daten. Die Datei-API wird derzeit von der W3C Web Applications Working Group standardisiert. Mit der Datei-API können Webentwickler sicher und ohne Erweiterungen oder Plug-Ins auf lokale Dateien auf Client-PCs zugreifen.

Reibungslose Dateiuploads

Die Datei-API ermöglicht einem Browser oder einer App das Lesen und Bearbeiten von Dateien, wenn der Benutzer die Genehmigung dazu erteilt. Zudem ermöglicht die Datei-API einen problemlosen Dateiupload ohne Plug-Ins.

Im folgenden Beispiel für die Datei-API von W3C behandeln unterschiedliche Codeblöcke Status-, Fehler und Erfolgsbedingungen:


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


Der BLOB-Konstruktor

Mit dem Blob-Konstruktor können Webentwickler ein BLOB (das oft einer Datei entspricht) direkt auf dem Client erstellen oder ändern. Der Konstruktor ist in der W3C-Spezifikation für die Datei-APIdefiniert, die sich zurzeit in der Arbeitsentwurfsphase befindet.

In älteren Versionen der Datei-API konnten Dateien zwar gelesen, jedoch nicht direkt auf dem Client bearbeitet werden. Die Darstellung einer Datei konnte geändert werden, zum Speichern dieser Bearbeitungen war jedoch das Hochladen der Datei und der Bearbeitungen auf einen Server erforderlich; dort wurden die Datei und die Bearbeitungen verarbeitet und die geänderte Datei anschließend heruntergeladen. Mit dem Blob-Konstruktor können Sie einfach einen Blob aus einem Array erstellen. Der Array kann andere Blob-Objekte, Textzeichenfolgen oder Arraypuffer enthalten, und Sie können den Array bei der Erstellung als Parameter an das BLOB übergeben.

Als zweiter Parameter kann ein optionales Wörterbuchobjekt hinzugefügt werden, das zwei Member enthalten kann: type und endings.

Im folgenden Beispiel (für Internet Explorer 10 oder höher) wird dieser Prozess kurz und bündig veranschaulicht:


<!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>


Mithilfe der Methoden msSaveBlob() und msSaveOrOpenBlob() kann das Blob genau wie eine aus dem Internet heruntergeladene Datei auf dem Computer des Benutzers gespeichert werden. Die Dateien werden standardmäßig im Ordner "Downloads" gespeichert.

Der Unterschied zwischen msSaveBlob() und msSaveOrOpenBlob() besteht darin, dass dem Benutzer bei der msSaveBlob()-Methode nur eine Schaltfläche zum Speichern zur Verfügung steht. Bei der msSaveOrOpenBlob()-Methode sind Schaltflächen zum Speichern und Öffnen vorhanden. Wenn Sie den oben gezeigten Beispielcode (in Internet Explorer 10 oder höher) ausführen, sollte dies klarer werden.

Sonstige Verbesserungen

Zu den sonstigen dateibezogenen Verbesserungen gehören mehrere Dateiuploads (4 GB pro Datei) mit Dateitypfilterung. Im folgenden Beispiel können Benutzer mehrere GIF- (Graphics Interchange Format) oder JPEG-Dateien auswählen:


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

Weitere Informationen finden Sie im Abschnitt "Dateiuploadstatus (Type=Datei)" der HTML5-Spezifikation.

API-Referenz

File API

Beispiele und Lernprogramme

So wird's gemacht: Verwalten lokaler Dateien

Demos für die Internet Explorer-Testversion

BlobBuilder
Binärdateiprüfung

IEBlog-Beiträge

Neuer Blob-Konstruktor in IE10
Erstellen von Dateien mithilfe von BlobBuilder
HTML5, Site-Ready- und experimentelle Versionen
Verwenden von Binärdaten mit typisierten Arrays

Spezifikation

Datei-API

Verwandte Themen

Uneingeschränktes Laden mit der Datei-API

 

 

Anzeigen:
© 2014 Microsoft