Die JavaScript-Datei-API implementiert Datei-Upload-Vorschau_Javascript-Fähigkeiten

1. Übersicht
In der Vergangenheit war der Zugriff auf lokale Dateien für browserbasierte Anwendungen ein Problem. Obwohl JavaScript mit der kontinuierlichen Weiterentwicklung der Web 2.0-Anwendungstechnologie eine immer wichtigere Rolle spielt, war JavaScript aus Sicherheitsgründen immer nicht in der Lage, auf lokale Dateien zuzugreifen. Um Funktionen wie das Ziehen und Hochladen lokaler Dateien im Browser zu implementieren, müssen wir daher auf verschiedene Technologien zurückgreifen, die von bestimmten Browsern bereitgestellt werden. Für den IE müssen wir beispielsweise ActiveX-Steuerelemente verwenden, um Zugriff auf lokale Dateien zu erhalten, und für Firefox müssen wir auch die Plug-in-Entwicklung verwenden. Da die technischen Implementierungen verschiedener Browser unterschiedlich sind, wird unser Programm sehr komplex und schwierig zu warten, damit das Programm mehrere Browser unterstützt. Doch durch das Aufkommen der File API hat sich das alles völlig geändert.

File API ist ein von Mozilla beim W3C eingereichter Entwurf mit dem Ziel, eine Reihe von Standard-JavaScript-APIs zu starten. Seine Grundfunktion besteht darin, lokale Dateien mit JavaScript zu betreiben. Aus Sicherheitsgründen bietet diese API nur eingeschränkten Zugriff auf lokale Dateien. Damit können wir ganz einfach reines JavaScript verwenden, um lokale Dateien zu lesen und hochzuladen. Derzeit ist FireFox 3.6 der erste Browser, der diese Funktion unterstützt. Darüber hinaus verfügen auch die neuesten Versionen der Browser Google Chrome und Safari über entsprechende Unterstützung. Die Datei-API wird voraussichtlich Teil der zukünftigen HTML 5-Spezifikation sein, die derzeit vom W3C entwickelt wird.

2. Datei-API-Übersicht
Die Datei-API besteht aus einer Reihe von JavaScript-Objekten und -Ereignissen. Gibt Entwicklern die Möglichkeit, in der Dateiauswahlsteuerung 686cf11c17bbba1d5481bf0c9dbb6941 ausgewählte Dateien zu bearbeiten. Abbildung 1 zeigt die Kombinationsbeziehung aller JavaScripts in der Datei-API.

Typ FileList enthält eine Reihe von Dateiobjekten. Normalerweise können FileList-Objekte aus dem Dateifeld (7a282165fe11716a838bf671a5343150) im Formular entnommen werden. Ein Blob-Objekt stellt eine Reihe unformatierter Binärströme dar, die ein Browser lesen kann. Im Blob-Objekt stellt das Größenattribut die Größe des Streams dar. Die Funktion Slice() kann ein langes Blob-Objekt in kleine Stücke teilen. Das File-Objekt erbt vom Blob-Objekt und dateibezogene Attribute werden dem Blob-Objekt hinzugefügt. Unter diesen stellt der Attributname den Namen der Datei dar. Dieser Name entfernt die Pfadinformationen der Datei und behält nur den Dateinamen bei. Das Typattribut repräsentiert den MIME-Typ der Datei. Das Attribut urn stellt die URN-Informationen dieser Datei dar. Um den Dateilesevorgang abzuschließen, wird eine FileReader-Objektinstanz einem Datei- oder Blob-Objekt zugeordnet und stellt drei verschiedene Dateilesefunktionen und sechs Ereignisse bereit.

Der spezifische Inhalt der Dateilesefunktion:
readAsBinaryString() Lesen Sie den Dateiinhalt und das Leseergebnis ist eine Binärzeichenfolge. Jedes Byte der Datei wird als Ganzzahl im Bereich [0..255] dargestellt. Die Funktion akzeptiert ein File-Objekt als Parameter.
readAsText() Liest den Dateiinhalt und das Leseergebnis ist eine Textzeichenfolge, die den Dateiinhalt darstellt. Die Funktion akzeptiert ein File-Objekt und den Namen der Textkodierung als Parameter.
readAsDataURL Liest den Dateiinhalt und das Leseergebnis ist eine Daten-URL. DataURL ist durch RFC2397 definiert.
Der spezifische Inhalt des Dateileseereignisses:
Ereignisname Ereignisbeschreibung
Onloadstart Wird ausgelöst, wenn das Lesen der Datei beginnt.
Fortschritt Wird regelmäßig ausgelöst, wenn der Lesevorgang läuft. Die Ereignisparameter enthalten die Gesamtmenge der gelesenen Daten.
Abort Wird ausgelöst, wenn der Lesevorgang abgebrochen wird.
Fehler Wird ausgelöst, wenn ein Lesefehler auftritt.
Laden Wird ausgelöst, wenn der Lesevorgang erfolgreich abgeschlossen wurde.
Loadend Wird ausgelöst, wenn der Lesevorgang abgeschlossen ist, unabhängig von Erfolg oder Misserfolg.

3. Einfaches Beispiel für die Datei-API
Als Nächstes zeigen wir anhand eines einfachen Beispiels die grundlegende Verwendung der Datei-API. Dieses Beispiel enthält zwei Codedateien: index.html enthält den HTML-Code auf der Webseite und JavaScript-Code für die Verarbeitung von Uploads. upload.jsp enthält den Code auf der Serverseite zum Empfang hochgeladener Dateien. Bitte sehen Sie sich die Datei „sourcecode.zip“ im Anhang an. In diesem Beispiel zeigen wir ein herkömmliches Formular mit einem Dateiauswahlfeld an. Wenn der Benutzer eine Datei auswählt und auf „Senden“ klickt, verwenden wir die Datei-API, um den Dateiinhalt zu lesen und die Datei mithilfe von Ajax über das XMLHttpRequest-Objekt auf den Server hochzuladen. Abbildung 2 zeigt einen Screenshot der Demo in Aktion.

Wir zeigen den Code Schritt für Schritt. Listing 1 zeigt den HTML-Teil des Codes.
HTML-Teil des Beispielcodes von Listing 1

 <body> 
 <h1>File API Demo</h1> 
 <p> 
 <!-- 用于文件上传的表单元素 --> 
 <form name="demoForm" id="demoForm" method="post" enctype="multipart/form-data" 
 action="javascript: uploadAndSubmit();"> 
 <p>Upload File: <input type="file" name="file" /></p> 
 <p><input type="submit" value="Submit" /></p> 
 </form> 
 <div>Progessing (in Bytes): <span id="bytesRead"> 
 </span> / <span id="bytesTotal"></span> 
 </div> 
 </p> 
 </body>

Wie Sie sehen können, verwenden wir ein normales ff9c23ada1bcecdd1a0fb5d5a0f18437-Tag, um ein traditionelles 0ac820164a0b3fea57ee8f01d9b5fa57-Element einzubinden. Es gibt auch ein Submit-Element innerhalb von ff9c23ada1bcecdd1a0fb5d5a0f18437. Außerhalb des ff9c23ada1bcecdd1a0fb5d5a0f18437 gibt es 45a2772a6b6107b401db3c9b82c049c2-Elemente, die die gelesene Datenmenge und die Gesamtdatenmenge darstellen. Das Aktionsattribut von ff9c23ada1bcecdd1a0fb5d5a0f18437 verweist auf eine JavaScript-Funktion uploadAndSubmit(). Diese Funktion schließt den Vorgang des Lesens und Hochladens der Datei ab. Der Funktionscode ist in Listing 2 dargestellt.
Auflistung von 2 JavaScript-Funktionen zum Lesen und Hochladen von Dateien

 function uploadAndSubmit() { 
 var form = document.forms["demoForm"]; 
  
 if (form["file"].files.length > 0) { 
 // 寻找表单域中的 <input type="file" ... /> 标签
 var file = form["file"].files[0]; 
 // try sending 
 var reader = new FileReader();

 reader.onloadstart = function() { 
 // 这个事件在读取开始时触发
 console.log("onloadstart"); 
 document.getElementById("bytesTotal").textContent = file.size; 
 } 
 reader.onprogress = function(p) { 
 // 这个事件在读取进行中定时触发
 console.log("onprogress"); 
 document.getElementById("bytesRead").textContent = p.loaded; 
 }

 reader.onload = function() { 
  // 这个事件在读取成功结束后触发
 console.log("load complete"); 
 }

 reader.onloadend = function() { 
  // 这个事件在读取结束后，无论成功或者失败都会触发
 if (reader.error) { 
 console.log(reader.error); 
 } else { 
 document.getElementById("bytesRead").textContent = file.size; 
 // 构造 XMLHttpRequest 对象，发送文件 Binary 数据
 var xhr = new XMLHttpRequest(); 
 xhr.open(/* method */ "POST", 
 /* target url */ "upload.jsp&#63;fileName=" + file.name 
 /*, async, default to true */); 
 xhr.overrideMimeType("application/octet-stream"); 
 xhr.sendAsBinary(reader.result); 
 xhr.onreadystatechange = function() { 
 if (xhr.readyState == 4) { 
 if (xhr.status == 200) { 
 console.log("upload complete"); 
 console.log("response: " + xhr.responseText); 
 } 
 } 
 } 
 } 
 }

 reader.readAsBinaryString(file); 
 } else { 
 alert ("Please choose a file."); 
 } 
 }

In dieser Funktion suchen wir zuerst das ff9c23ada1bcecdd1a0fb5d5a0f18437-Element, das das 0ac820164a0b3fea57ee8f01d9b5fa57-Element enthält, und suchen das d5fd7aea971a85678ba271703566ebfd-Element, das die hochgeladenen Dateiinformationen enthält. Wenn das d5fd7aea971a85678ba271703566ebfd-Element keine Datei enthält, bedeutet dies, dass der Benutzer keine Datei ausgewählt hat und ein Fehler gemeldet wird.
Listing 3: Finden des d5fd7aea971a85678ba271703566ebfd-Elements

 var form = document.forms["demoForm"];

 if (form["file"].files.length > 0) 
 { 
 var file = form["file"].files[0]; 
… …
 } 
 else 
 { 
 alert ("Please choose a file."); 
 }

Hier ist der von form["file"].files zurückgegebene Objekttyp die erwähnte FileList. Wir nehmen das erste Element daraus. Danach erstellen wir das FileReader-Objekt:
var reader = new FileReader();
Wenn das Ereignis onloadstart ausgelöst wird, füllen Sie das Element 45a2772a6b6107b401db3c9b82c049c2 auf der Seite aus, das die Gesamtmenge der gelesenen Daten darstellt. Siehe Listing 4
Auflistung von 4 Onloadstart-Ereignissen

 reader.onloadstart = function() 
 { 
 console.log("onloadstart"); 
 document.getElementById("bytesTotal").textContent = file.size; 
 }
在 onprogress 事件触发时，更新页面上已读取数据量的 <span> 元素。参见清单 5

Auflistung von 5 onprogress-Events

 reader.onprogress = function(p) { 
 console.log("onloadstart"); 
 document.getElementById("bytesRead").textContent = p.loaded; 
 }

Wenn im letzten onloadend-Ereignis keine Fehler vorliegen, lesen wir den Dateiinhalt und laden ihn über XMLHttpRequest hoch.
Auflistung von 6 Onloadend-Ereignissen

 reader.onloadend = function() 
 { 
 if (reader.error) 
 { 
 console.log(reader.error); 
 } 
 else 
 { 
 // 构造 XMLHttpRequest 对象，发送文件 Binary 数据
 var xhr = new XMLHttpRequest(); 
 xhr.open(/* method */ "POST", 
 /* target url */ "upload.jsp?fileName=" + file.name 
 /*, async, default to true */); 
 xhr.overrideMimeType("application/octet-stream"); 
 xhr.sendAsBinary(reader.result); 
… …
 } 
 }

Gemäß den Spezifikationen der File API können wir die Verarbeitung des Onloadend-Ereignisses auch in die Verarbeitung des Ereignisfehlers und der Ereignislast aufteilen.
In diesem Beispiel verwenden wir eine JSP im Hintergrund, um den Upload abzuwickeln. Der JSP-Code ist in Listing 7 dargestellt.
Listing 7 Umgang mit hochgeladenem JSP-Code

 <%@ page import="java.io.*" %><% 
  BufferedInputStream fileIn = new 
 BufferedInputStream(request.getInputStream()); 
  String fn = request.getParameter("fileName"); 
  
  byte[] buf = new byte[1024];
//接收文件上传并保存到 d:\
  File file = new File("d:/" + fn); 
  
  BufferedOutputStream fileOut = new BufferedOutputStream(new 
 FileOutputStream(file)); 
  
  while (true) { 
    // 读取数据
   int bytesIn = fileIn.read(buf, 0, 1024); 
   
   System.out.println(bytesIn); 
   
   if (bytesIn == -1) 
 { 
     break; 
   } 
 else 
 { 
     fileOut.write(buf, 0, bytesIn); 
   } 
  } 
  
  fileOut.flush(); 
  fileOut.close(); 
  
  out.print(file.getAbsolutePath()); 
 %>

在这段 JSP 代码中，我们从 POST 请求中接受文件名字以及二进制数据。将二进制数据写入到服务器的“D:\”路径中。并返回文件的完整路径。以上代码可以在最新的 Firefox 3.6 中调试通过。
四、使用拖拽上传文件
前面我们介绍了怎样通过 HTML5 的 File API 来读取本地文件内容并上传到服务器，通过这种方式已经能够满足大部分用户的需求了。其中一个不足是用户只能通过点击“浏览”按钮来逐个添加文件，如果需要批量上传文件，会导致用户体验不是很友好。而在桌面应用中，用户一般可以通过鼠标拖拽的方式方便地上传文件。拖拽一直是 Web 应用的一个软肋，一般浏览器都不提供对拖拽的支持。虽然 Web 程序员可以通过鼠标的 mouseenter，mouseover 和 mouseout 等事件来实现拖拽效果，但是这种方式也只能使拖拽的范围局限在浏览器里面。一个好消息是 HTML5 里面不仅加入了 File API，而且加入了对拖拽的支持，Firefox 3.5 开始已经对 File API 和拖拽提供了支持。下面我们先简要介绍一下拖拽的使用，然后用一个例子来说明如何通过拖拽上传文件。
1、拖拽简介
拖拽一般涉及两个对象：拖拽源和拖拽目标。
拖拽源：在 HTML5 草案里如果一个对象可以作为源被拖拽，需要设置 draggable 属性为 true 来标识该对象可作为拖拽源。然后侦听源对象的 dragstart 事件，在事件处理函数里设置好 DataTransfer。在 DataTransfer 里可以设置拖拽数据的类型和值。比如是纯文本的值，可以设置类型为"text/plain"，url 则把类型设置为"text/uri-list"。 这样，目标对象就可以根据期望的类型来选择数据了。
拖拽目标：一个拖拽目标必须侦听 3 个事件。
dragenter：目标对象通过响应这个事件来确定是否接收拖拽。如果接收则需要取消这个事件，停止时间的继续传播。
dragover：通过响应这个事件来显示拖拽的提示效果。
drop：目标对象通过响应这个事件来处理拖拽数据。在下面的例子里我们将在 drop 事件的处理函数里获取 DataTransfer 对象，取出要上传的文件。
由于本文主要介绍 File API，对这部分不作详细解释，感兴趣的读者可以参考 HTML5 草案（见参考资料）。
2、拖拽上传文件实例
下面以一个较为具体的例子说明如何结合拖拽和 File API 来上传文档。由于直接和桌面交互，所以我们不需要处理拖拽源，直接在目标对象里从 DataTransfer 对象获取数据即可。
首先，我们需要创建一个目标容器用来接收拖拽事件，添加一个 div 元素即可。然后用一个列表来展示上传文件的缩略图，进度条及文件名。参见清单 8 的 HTML 代码和图 3 的效果图。详细代码请参见附件中的 dnd.html 文件。
清单 8 拖曳目标的 HTML 代码

 <div id="container"> 
 <span>Drag and drop files here to upload.</span> 
 <ul id="fileList"></ul> 
 </div>

拖拽目标创建好之后，我们需要侦听其对应的事件 dragenter，dragover 和 drop。在 dragenter 事件处理函数里，我们只是简单地清除文件列表，然后取消 dragenter 事件的传播，表示我们接收该事件。更加妥当的作法是判断 DataTransfer 里的数据是否为文件，这里我们假设所有拖拽源都是文件。dragover 事件里我们取消该事件，使用默认的拖拽显示效果。在 drop 事件里我们注册了 handleDrop 事件处理函数来获取文件信息并上传文件。清单 9 展示了这些事件处理函数。
清单 9 设置事件处理函数

 function addDNDListeners() 
 { 
 var container = document.getElementById("container"); 
 var fileList = document.getElementById("fileList"); 
 // 拖拽进入目标对象时触发
 container.addEventListener("dragenter", function(event) 
 { 
 fileList.innerHTML =''; 
 event.stopPropagation(); 
 event.preventDefault(); 
 }, false); 
 // 拖拽在目标对象上时触发
 container.addEventListener("dragover", function(event) 
 { 
 event.stopPropagation(); 
 event.preventDefault(); 
 }, false); 
 // 拖拽结束时触发
 container.addEventListener("drop", handleDrop, false); 
 } 
 window.addEventListener("load", addDNDListeners, false);

处理 drop 事件
用户在拖拽结束时松开鼠标触发 drop 事件。在 drop 事件里，我们可以通过 event 参数的 DataTransfer 对象获取 files 数据，通过遍历 files 数组可以获取每个文件的信息。然后针对每个文件，创建 HTML 元素来显示缩略图，进度条和文件名称。File 对象的 getAsDataURL 可以将文件内容以 URL 的形式返回，对图片文件来说可以用来显示缩略图。要注意的一点是，在 drop 事件处理函数里要取消事件的继续传播和默认处理函数，结束 drop 事件的处理。清单 10 展示了 drop 事件的处理代码。
清单 10 drop 事件的处理

 function handleDrop(event) 
 { 
  // 获取拖拽的文件列表
 var files = event.dataTransfer.files; 
 event.stopPropagation(); 
 event.preventDefault(); 
 var fileList = document.getElementById("fileList"); 
 // 展示文件缩略图，文件名和上传进度，上传文件
 for (var i = 0; i < files.length; i++) 
 { 
 var file = files[i]; 
 var li = document.createElement('li'); 
 var progressbar = document.createElement('div'); 
 var img = document.createElement('img'); 
 var name = document.createElement('span'); 
 progressbar.className = "progressBar"; 
 img.src = files[i].getAsDataURL(); 
 img.width = 32; 
 img.height = 32; 
 name.innerHTML = file.name; 
 li.appendChild(img); 
 li.appendChild(name); 
 li.appendChild(progressbar); 
 fileList.appendChild(li); 
 uploadFile(file, progressbar) 
 } 
 }

上传文件
我们可以通过 XMLHttpRequest 对象的 sendAsBinary 方法来上传文件，通过侦听 upload 的 progress，load 和 error 事件来监测文件上传的进度，成功完成或是否发生错误。在 progress 事件处理函数里我们通过计算已经上传的比例来确定进度条的位置。参见清单 11。图 4 展示了上传文件的效果图。
清单 11 上传文件

 function uploadFile(file, progressbar) 
 { 
 var xhr = new XMLHttpRequest(); 
 var upload = xhr.upload;

 var p = document.createElement('p'); 
 p.textContent = "0%"; 
 progressbar.appendChild(p); 
 upload.progressbar = progressbar; 
 // 设置上传文件相关的事件处理函数
 upload.addEventListener("progress", uploadProgress, false); 
 upload.addEventListener("load", uploadSucceed, false); 
 upload.addEventListener("error", uploadError, false); 
 // 上传文件
 xhr.open("POST", "upload.jsp?fileName="+file.name); 
 xhr.overrideMimeType("application/octet-stream"); 
 xhr.sendAsBinary(file.getAsBinary()); 
 } 
 function uploadProgress(event) 
 { 
 if (event.lengthComputable) 
 { 
  // 将进度换算成百分比
 var percentage = Math.round((event.loaded * 100) / event.total); 
 console.log("percentage:" + percentage); 
 if (percentage < 100) 
 { 
 event.target.progressbar.firstChild.style.width = (percentage*2) + "px"; 
 event.target.progressbar.firstChild.textContent = percentage + "%"; 
 } 
 } 
 } 
 function uploadSucceed(event) 
 { 
 event.target.progressbar.firstChild.style.width = "200px"; 
 event.target.progressbar.firstChild.textContent = "100%"; 
 } 
 function uploadError(error) 
 { 
 alert("error: " + error); 
 }

本文通过对 File API 规范的讲解，以及两个展示其使用方法的例子，为大家提前揭示了作为未来 HTML5 重要组成部分的 JavaScript File API 的全貌。利用它，结合其他 HTML5 的新特性，比如 Drag&Drop，我们可以利用纯 JavaScript 方案，为用户提供更好使用体验的 Web 应用，与此同时，这样的一致化方案也使我们避免了以往跨浏览器支持所花费的巨大代价。相信 File API 的出现和广泛应用，将会是未来的 Web 2.0 应用的大势所趋。