L'API de fichier JavaScript implémente les compétences de téléchargement de fichiers preview_javascript

1. Aperçu
Dans le passé, accéder aux fichiers locaux était un casse-tête pour les applications basées sur un navigateur. Bien que JavaScript joue un rôle de plus en plus important avec le développement continu de la technologie d'application Web 2.0, pour des raisons de sécurité, JavaScript a toujours été incapable d'accéder aux fichiers locaux. Par conséquent, afin de mettre en œuvre des fonctions telles que le glisser et le téléchargement de fichiers locaux dans le navigateur, nous devons recourir à diverses technologies fournies par des navigateurs spécifiques. Par exemple, pour IE, nous devons utiliser des contrôles ActiveX pour accéder aux fichiers locaux, et pour Firefox, nous devons également utiliser le développement de plug-ins. Étant donné que les implémentations techniques des différents navigateurs sont différentes, pour que le programme prenne en charge plusieurs navigateurs, notre programme deviendra très complexe et difficile à maintenir. Mais maintenant, tout cela a été complètement changé en raison de l’émergence de l’API File.

File API est un projet soumis par Mozilla au W3C, visant à lancer un ensemble d'API JavaScript standard. Sa fonction de base est d'exploiter des fichiers locaux avec JavaScript. Pour des raisons de sécurité, cette API ne fournit qu'un accès limité aux fichiers locaux. Avec lui, nous pouvons facilement utiliser du JavaScript pur pour lire et télécharger des fichiers locaux. Actuellement, FireFox 3.6 est le premier navigateur à prendre en charge cette fonctionnalité. De plus, les dernières versions des navigateurs Google Chrome et Safari bénéficient également d'une prise en charge correspondante. L'API File devrait faire partie de la future spécification HTML 5 actuellement développée par le W3C.

2. Présentation de l'API de fichiers
L'API File se compose d'un ensemble d'objets et d'événements JavaScript. Donne aux développeurs la possibilité de manipuler les fichiers sélectionnés dans le contrôle de sélection de fichiers La figure 1 montre la relation de combinaison de tous les JavaScript dans l'API File.

Type FileList contient un ensemble d'objets File. Habituellement, les objets FileList peuvent être extraits du champ de fichier () du formulaire. Un objet Blob représente un ensemble de flux binaires bruts qu'un navigateur peut lire. Dans l'objet Blob, l'attribut size représente la taille du flux. La fonction slice() peut diviser un long objet Blob en petits morceaux. L'objet File hérite de l'objet Blob et les attributs liés au fichier sont ajoutés à l'objet Blob. Parmi eux, le nom d'attribut représente le nom du fichier. Ce nom supprime les informations de chemin du fichier et ne conserve que le nom du fichier. L'attribut type représente le type MIME du fichier. L'attribut urn représente les informations URN de ce fichier. Pour terminer l'opération de lecture de fichier, une instance d'objet FileReader est associée à un objet File ou Blob et fournit trois fonctions de lecture de fichier différentes et 6 événements.

Le contenu spécifique de la fonction de lecture de fichiers :
readAsBinaryString() Lire le contenu du fichier et le résultat de la lecture est une chaîne binaire. Chaque octet du fichier sera représenté sous forme d'entier compris dans la plage [0..255]. La fonction accepte un objet File comme paramètre.
readAsText() Lit le contenu du fichier et le résultat de la lecture est une chaîne de texte représentant le contenu du fichier. La fonction accepte un objet File et le nom de l'encodage du texte comme paramètres.
readAsDataURL Lit le contenu du fichier et le résultat de la lecture est une URL data:. DataURL est défini par RFC2397.
Le contenu spécifique de l'événement de lecture de fichier :
Nom de l'événement Description de l'événement
Onloadstart Déclenché lorsque la lecture du fichier démarre.
Progression Déclenché régulièrement lorsque la lecture est en cours. Les paramètres de l'événement contiendront la quantité totale de données lues.
Abandonner Déclenché lorsque la lecture est interrompue.
Erreur Déclenché lorsqu'une erreur de lecture se produit.
Charger Déclenché lorsque la lecture se termine avec succès.
Loadend Sera déclenché lorsque la lecture est terminée, quel que soit le succès ou l'échec.

3. Exemple simple d'API de fichier
Ensuite, nous utilisons un exemple simple pour montrer l’utilisation de base de l’API File. Cet exemple contient deux fichiers de code, index.html contient le code HTML côté Web et le code JavaScript pour le traitement des téléchargements. upload.jsp contient le code côté serveur pour recevoir les fichiers téléchargés. Veuillez consulter le code source.zip dans la pièce jointe. Dans cet exemple, nous afficherons un formulaire traditionnel avec un champ de sélection de Fichier. Lorsque l'utilisateur sélectionne un fichier et clique sur Soumettre, nous utilisons l'API File pour lire le contenu du fichier et télécharger le fichier sur le serveur à l'aide d'Ajax via l'objet XMLHttpRequest. La figure 2 montre une capture d'écran de la démo en action.

Nous montrons le code étape par étape. Le listing 1 montre la partie HTML du code.
Partie HTML de l'exemple de code du 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>

Comme vous pouvez le voir, nous utilisons une balise

 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."); 
 } 
 }

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

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

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

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

 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); 
… …
 } 
 }

 <%@ 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()); 
 %>

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

 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);

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

 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); 
 }