Compétences du didacticiel Method_html5 de mise en œuvre de la reprise des points d'arrêt des fichiers volumineux HTML5

Groupage de fichiers volumineux

Les serveurs Web généralement utilisés ont des limites de taille pour soumettre des données au serveur. Pour les fichiers dépassant une certaine taille, le serveur renverra un message de rejet. Bien entendu, les serveurs web fournissent des fichiers de configuration susceptibles de modifier la limite de taille. Il existe également des moyens de télécharger des fichiers volumineux vers IIS en modifiant le serveur Web pour limiter la taille du fichier. Cela pose cependant des problèmes pour la sécurité du serveur web. Un attaquant peut facilement envoyer un gros paquet de données et entraîner directement votre serveur Web à mort.
La méthode de mise en œuvre courante actuelle pour télécharger des fichiers volumineux consiste à diviser les fichiers volumineux en morceaux. Par exemple, pour un fichier de 100 Mo, divisez-le en 50 blocs selon 2 Mo. Téléchargez ensuite chaque fichier sur le serveur tour à tour, puis fusionnez les fichiers sur le serveur une fois le téléchargement terminé.
Pour implémenter le téléchargement de fichiers volumineux sur le Web, le noyau implémente principalement la segmentation des fichiers. Avant l’apparition de l’API de fichiers HTML5, il était nécessaire d’implémenter le transfert de fichiers par morceaux sur le Web. Le regroupement de fichiers ne peut être réalisé que via Flash ou Activex.

Sous Html5, nous pouvons directement implémenter la segmentation de fichiers via la méthode slice de fichier. Tels que :

Code XML/HTMLCopier le contenu dans le presse-papiers

1. file.slice(0,1000);
2. file.slice(1000,2000);
3. file.slice(2000,3000);

Ensuite, il est téléchargé sur le serveur de manière asynchrone via XMLHttpRequest.

Bibliothèque de classes de fichiers de téléchargement HTML5

Si vous êtes intéressé et avez le temps, vous pouvez bien sûr utiliser l'API File de HTML5 pour l'implémenter vous-même. J'ai trouvé les deux bibliothèques suivantes prenant en charge HTML5 sur Internet.
resumable.js Ci-joint l'adresse sur git : https://github.com/23/resumable.js
Pludload http://plupload.com/

resumable est un pur téléchargement HTML5 bibliothèque de classe.
Pludload prend en charge html5, flash, silverlight et html4. Il déterminera automatiquement si le navigateur prend en charge html5 et utilisera d'autres méthodes de téléchargement.
Je l'ai testé et j'ai découvert que Resumable et Pludload prennent en charge le téléchargement de fichiers HTML5 en morceaux. Après l'avoir utilisé, je pense que la reprise est plus appropriée, je choisirai donc la reprise pour l'introduction ci-dessous.

Présentation de l'utilisation du téléchargement de points d'arrêt resumable.js

Présentation de la configuration principale :

Code JavaScriptCopier le contenu dans le presse-papiers

1. var r = nouveau Reprise({
2. cible :'/test/upload',
3. taille du morceau : 1*1024*1024,
4. Téléchargements simultanés : 4,
5. testChunks : vrai,
6. ThrottleProgressCallbacks : 1,
7. méthode : "octet"
8. });

chunkSize Taille du fichier fragmenté, en octets
simultaneousUploads Le nombre de processus téléchargeant des fragments de fichiers en même temps, permettant de télécharger plusieurs fragments de fichiers en même temps.
testChunks vérifie si le morceau de fichier précédent doit d'abord envoyer des informations sur le fichier via la méthode get pour détecter si le fichier a été téléchargé.

Le téléchargement du point d'arrêt avec reprise est implémenté via le nœud de configuration testChunks, lorsqu'il est défini sur true. resumable enverra d'abord une requête get, si le statut http renvoie 200. On considère que le bloc actuel a été téléchargé, puis une demande d'obtention du bloc suivant est effectuée. Si l'état http renvoyé n'est pas 200, le paquet de données de bloc actuel sera envoyé via le mode post pour le téléchargement du bloc de fichiers.

Définir testChunks sur true ajoutera une requête get pour chaque téléchargement, si nous connaissons déjà le nombre de morceaux dans le fichier avant le dernier téléchargement interrompu. La prochaine fois, téléchargez simplement directement à partir du numéro de bloc interrompu. Cela réduit une requête http get pour chaque bloc.
En réponse à cette exigence, j'ai modifié le code source de Resumable et ajouté un attribut startchunkindex à l'objet fichier dans Resumable, dont la valeur par défaut est 0. Utilisé pour définir le bloc à partir duquel le fichier actuel doit être téléchargé. De cette façon, il nous suffit d'effectuer une requête depuis le serveur avant de télécharger le fichier (en demandant dans quel bloc le fichier actuel est téléchargé) et de renvoyer le dernier index de bloc de fichier téléchargé. Définissez ensuite la valeur d'index sur l'attribut startchunkindex du fichier pour commencer le téléchargement à partir du dernier bloc de fichier déconnecté.
Méthode d'appel :

Code JavaScriptCopier le contenu dans le presse-papiers

1. //Gérer l'événement d'ajout de fichier
2. r.on('fichierAjouté', fonction (fichier) {
3.                                                                                                                                                                                                                                                 . Pour plus de détails, vous pouvez voir la démo dans la pièce jointe.
Finition du travail

Une fois tous les blocs de fichiers téléchargés, le travail final consiste à fusionner et à enregistrer les fichiers. La pièce jointe est un exemple de serveur d'implémentation de upload.net avec reprise, comprenant une simple fonction de fusion de fichiers. Vous pouvez également télécharger des démos dans d'autres langues à partir du git de Resumable.
Par souci de simplicité, l'exemple de démonstration stocke uniquement les fichiers sur la machine locale. Dans un environnement de production réel. Généralement, il doit être placé sur un serveur de fichiers distinct (le Web frontal est téléchargé sur le serveur de fichiers via FTP ou partage de dossiers), puis les fichiers téléchargés doivent être distribués, mis en miroir ou traités (comme la compression vidéo). Bien entendu, il est préférable de le stocker dans un système de fichiers distribué. Actuellement, il semble que le placer dans le système de fichiers distribués Hadoop (HDFS) soit une bonne solution.
démo


Vs2012 Html5 Upload téléchargement de la démo