Exemple de partage de code pour le téléchargement par glisser-déposer de fichiers HTML5

html5 Le téléchargement de fichiers par glisser-déposer est un vieux sujet. Il existe de nombreux exemples sur Internet. Le code que j'ai trouvé et modifié à l'origine a également été trouvé. en ligne, mais j'ai juste marché sur quelques-uns. Après la fosse, j'ai voulu enregistrer le processus.

Implémentation de la fonction

Ce qui suit présente principalement l'implémentation du glisser-déposer de fichiers de l'extérieur du navigateur vers le navigateur pour le téléchargement. Tout d’abord, quelques bases nécessaires seront introduites.

DragÉvénements

Les événements de glisser incluent les éléments suivants :

• dragstart : déclenché lorsque l'utilisateur commence à faire glisser l' objet .

• dragenter : Déclenché lorsque la souris passe sur l'élément cible pour la première fois et que le glissement se produit. L'écouteur de cet événement doit indiquer si le dépôt est autorisé à cet emplacement ou si l'écouteur n'effectue aucune opération, le dépôt n'est alors pas autorisé par défaut.

• dragover : Déclenché lorsque la souris passe sur un élément et qu'un glissement se produit.

• dragleave : Déclenché lorsque la souris quitte un élément et qu'un glissement se produit.

• drag : déclenché à chaque fois que la souris est déplacée lorsque l'objet est déplacé.

• drop : Cet événement est déclenché sur l'élément lorsqu'un dépôt se produit à la fin de l'opération de glisser. L'écouteur doit être responsable de la récupération des données déplacées et de leur insertion à l'emplacement de dépôt.

• dragend : Déclenché lorsque le bouton de la souris est relâché tout en faisant glisser l'objet.

Lorsque vous faites glisser des fichiers de l'extérieur du navigateur vers le navigateur, les événements qui doivent être liés sont dragover et drop, les autres n'ont pas besoin d'être liés. dragover et drop traitement des événements la fonction doit appeler le <a href="http://www.php.cn/wiki/1074.html" target="_blank">prev <code style="font-family: 'Courier New', Courier, monospace; font-size: 1em; white-space: pre;"><a href="http://www.php.cn/wiki/1074.html" target="_blank">prev</a>entDefault()entDefault() , sinon le navigateur effectuera un traitement par défaut. Par exemple, les fichiers de type texte seront ouverts directement et une boîte de téléchargement de fichier peut apparaître pour les fichiers non texte.

Objet DataTransfer

L'objet glisser est utilisé pour transférer des données, via l'événement glisser event.dataTransfer Get.

• dataTransfer.dropEffect [ = value ] : Renvoie le type d'opération actuellement sélectionné. De nouvelles valeurs peuvent être définies pour modifier l'opération sélectionnée. Les valeurs facultatives sont : none, <a href="http://www.php.cn/wiki/1297.html" target="_blank">copy</a>, link, move .

• dataTransfer.effectAllowed [ = value ] : Renvoie le type d'opération autorisé, qui peut être modifié. Les valeurs facultatives sont : none, copy, copyLink, copyMove, link, linkMove, move, all, uninitialized .

• dataTransfer.types : renvoie une DOMString répertoriant tous les formats définis dans l'événement dragstart. De plus, si des fichiers sont déplacés, l'une des chaînes de type sera "Fichiers".

• dataTransfer.clearData( [ format ] ) : Supprimez les données au format spécifié. Si l'argument est omis, toutes les données sont supprimées.

• dataTransfer.setData(format, data) : Ajouter les données spécifiées.

• data = dataTransfer.getData(format) : Renvoie les données spécifiées. S'il n'existe pas de telles données, une chaîne vide est renvoyée.

• dataTransfer.files : renvoie la liste de fichiers déplacée, le cas échéant.

• dataTransfer.setDragImage(element, x, y) : Utilisez l'élément spécifié pour mettre à jour le retour d'information de glisser, en remplaçant le retour spécifié précédemment (retour d'information).

• dataTransfer.addElement(element) : ajoute l'élément spécifié à la liste des éléments utilisés pour afficher les commentaires de glissement.

Dans ce cas d'utilisation, la chose la plus importante est l'attribut dataTransfer.files , qui est ce que l'utilisateur fait glisser dans La liste de fichiers du navigateur est un objet FileList avec des attributs length , accessible via des indices.

FormData

FormData représente un formulaire, qui peut être ajouté au formulaire via le append('fieldName', value) Fonction Ajouter des paramètres. Les paramètres peuvent être non seulement des chaînes, mais également des objets Fichier ou même des données binaires.

XMLHttpRequest niveau 2

Nouvelle version de l'objet XMLHttpRequest, le XMLHttpRequest mentionné ici fait référence à la nouvelle version.

XMLHttpRequest peut effectuer des requêtes HTTP vers des serveurs avec des noms de domaine différents. C'est ce qu'on appelle le « partage de ressources d'origine croisée, appelé CORS).

Les navigateurs ont une célèbre politique de même origine, qui constitue la base de la sécurité du navigateur. En plus de la prise en charge du navigateur, CORS nécessite également le consentement du serveur.

XMLHttpRequest prend en charge l'envoi direct de FormData, tout comme le navigateur effectue la soumission de formulaire.

XMLHttpRequest prend également en charge les informations de progression (événement progress) La progression est divisée en progression du téléchargement et progression du téléchargement. L'événement de progression du téléchargement se trouve sur le XMLHttpRequest.upload . object , l'événement de progression du téléchargement se trouve dans l'objet XMLHttpRequest . Chaque événement de progression possède trois propriétés :

• lengthComputable : Nombre dénombrable d'octets téléchargés

• total : Nombre total d'octets

• loaded : Nombre d'octets téléchargés jusqu'à présent

En plus des événements de progression, les cinq événements suivants sont également pris en charge :

• loadÉvénement : Transfert terminé avec succès.

• abortÉvénement : Le transfert a été annulé par l'utilisateur.

• errorÉvénement : Une erreur s'est produite lors de la transmission.

• loadstartÉvénement : La transmission démarre.

• loadendÉvénement : Le transfert est terminé, mais on ne sait pas s'il a réussi ou échoué.

est identique à l'événement progress La fonction de traitement d'événement appartenant à l'opération de téléchargement est liée à l'objet XMLHttpRequest.upload, et le téléchargement de l'attribut est directement lié à l'objet XMLHttpRequest .

Code spécifique

Lors des tests sur votre propre machine, veillez à remplacer le chemin dans le code ci-dessous par le vôtre.

Côté serveur

Le côté serveur doit écrire un servlet pour recevoir le formulaire téléchargé.

/html5/FileUploadServlet

Il peut être implémenté rapidement à l'aide de l'annotation @MultipartConfig de servlet3.

Code client

<html>
<head>
<title> drag drop upload demo
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
</head>
<body>
       <p id= "progressBarZone">请将文件拖拽进浏览器内！ <br/></ p>
</body>

<script>
var progressBarZone = document.getElementById(&#39;progressBarZone&#39;);

function sendFile(files) {
       if (!files || files.length < 1) {
             return;
      }
      
       var percent = document.createElement(&#39;p&#39; );
      progressBarZone.appendChild(percent);

       var formData = new FormData();             // 创建一个表单对象FormData
      formData.append( &#39;submit&#39;, &#39;中文&#39; );  // 往表单对象添加文本字段
      
       var fileNames = &#39;&#39; ;
      
       for ( var i = 0; i < files.length; i++) {
             var file = files[i];    // file 对象有 name, size 属性
            
            formData.append( &#39;file[&#39; + i + &#39;]&#39; , file);       // 往FormData对象添加File对象
            
            fileNames += &#39;《&#39; + file.name + &#39;》， &#39; ;
      }
      
       var xhr = new XMLHttpRequest();
      xhr.upload.addEventListener( &#39;progress&#39;,
             function uploadProgress(evt) {
                   // evt 有三个属性：
                   // lengthComputable – 可计算的已上传字节数
                   // total – 总的字节数
                   // loaded – 到目前为止上传的字节数
                   if (evt.lengthComputable) {
    percent.innerHTML = fileNames + &#39; upload percent :&#39; + Math.round((evt.loaded / evt.total)  * 100) + &#39;%
&#39; ;
                  }
            }, false); // false表示在事件冒泡阶段处理

      xhr.upload.onload = function() {
            percent.innerHTML = fileNames + &#39;上传完成。

&#39; ;
      };

      xhr.upload.onerror = function(e) {
            percent.innerHTML = fileNames + &#39; 上传失败。

&#39; ;
      };

      xhr.open( &#39;post&#39;, &#39;http://cross.site.com:8080/html5/FileUploadServlet&#39; , true);
      xhr.send(formData);            
      // 发送表单对象。
}

document.addEventListener("dragover", function(e) {
      e.stopPropagation();
      e.preventDefault();            
      // 必须调用。否则浏览器会进行默认处理，比如文本类型的文件直接打开，非文本的可能弹出一个下载文件框。
}, false);

document.addEventListener("drop", function(e) {
      e.stopPropagation();
      e.preventDefault();            
      // 必须调用。否则浏览器会进行默认处理，比如文本类型的文件直接打开，非文本的可能弹出一个下载文件框。

      sendFile(e.dataTransfer.files);
}, false);
</script>
</html>

Si les codes ci-dessus sont tous déployés sur le même site internet, il n'y a pas de problème. Mais l’opération de téléchargement que je souhaite effectuer est de transférer le fichier vers un autre site Web, ce qui crée un écueil.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!