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

Ce composant est implémenté sur la base de Vue.js. Le framework d'interface utilisateur est elementUI. L'adresse de démonstration complète se trouve sur https://github.com/Msxiaoma/upload-folder. Glissez-déposez pour télécharger le dossier (uniquement pris en charge par Chrome).

1. Glissez et déposez plusieurs dossiers en même temps
2. Supprimer le dossier spécifié
3. Afficher la barre de progression du téléchargement du dossier actuel
4. Téléchargez des dossiers dépassant 5 Mo en plusieurs parties

L'effet est le suivant :

1. Glissez et déposez pour lire le chemin du fichier sous chaque dossier
2. Comment afficher la barre de progression du dossier actuellement téléchargé
3. Transport de cookies entre domaines lors du téléchargement de fichiers
4. Fragmentation des dossiers

Lors de l'exécution d'une opération de glisser-déposer, l'objet DataTransfer est utilisé pour enregistrer les données glissées vers le navigateur via l'action de glisser-déposer. Il peut sauvegarder une ou plusieurs données, un ou plusieurs types de données

 // Faites glisser le dossier dropFolders (e) { e.stopPropagation() e.preventDefault() var items = e.dataTransfer.items for (var i = 0; i < items.length; i++) { var item = items[ i] .webkitGetAsEntry() if (item) { this.checkFolders(item) } }}// Déterminer s'il s'agit d'un dossier checkFolders (item) { if (item.isDirectory) { this.traverseFileTree(item) } else { this.$alert('Prend uniquement en charge le téléchargement de dossiers', 'Prompt', { confirmButtonText: 'OK' }) }}traverseFileTree (élément, chemin, parentDir ) { chemin = chemin || '' if (item.isFile) { item.file((fichier) => { let obj = { fichier : fichier, chemin : chemin + file.name, attr : item.attr } this.filesList.push(obj) }) } else if (item.isDirectory) { var dirReader = item.createReader() dirReader.readEntries((entries) => { for (let je = 0; je < entrées.longueur; i++) { entrées[i].attr = item.attr this.traverseFileTree(entrées[i], chemin + item.name + '/', temp) } }, fonction (e) { console.log(e) }) }}

Fichiers sans fragmentation : en fonction du nombre total de fichiers dans le dossier, calculez le pourcentage de chaque fichier dans le dossier. Lorsqu'un fichier est téléchargé avec succès, modifiez le processus du dossier ;

Fichiers fragmentés : après avoir calculé le pourcentage de chaque fichier dans le fichier, calculez le pourcentage de chaque fichier dans le fichier. Une fois chaque fichier téléchargé avec succès, modifiez le processus du dossier.

Lorsque le serveur définit l'en-tête de réponse

Access-Control-Allow-Origin : Vous devez spécifier un nom de domaine clair et cohérent avec la page Web demandée et ne peut pas être *. Access-Control-Allow-Credentials : vrai

Définir les en-têtes de requête :

withCredentials : vrai

Remplir:

substr(start [, length ]) renvoie une sous-chaîne de la longueur spécifiée commençant à la position spécifiée.

start : option obligatoire. La position de départ de la sous-chaîne souhaitée. Le premier caractère de la chaîne a l'index 0.

longueur : facultatif. Le nombre de caractères qui doivent être inclus dans la sous-chaîne renvoyée.

substring renvoie la sous-chaîne située à la position spécifiée dans l'objet String. Renvoie une chaîne contenant la sous-chaîne du début à la fin (hors fin).

start : indique la position de départ de la sous-chaîne et l'index commence à 0.

end : indique la position de fin de la sous-chaîne, l'index commence à 0.

Ce qui précède représente l’intégralité du contenu de cet article. J’espère qu’il sera utile à l’étude de chacun. J’espère également que tout le monde soutiendra le réseau VeVb Wulin.