Méthode HTML5 pour implémenter le téléchargement de reprise de point d'arrêt de fichiers

L'API FILE de HTML5 possède une méthode slice qui peut diviser les objets BLOB. Le frontal obtient le fichier correspondant via l'objet FileList, divise le gros fichier en segments selon la méthode de division spécifiée, puis le transmet au back-end pièce par pièce, et le back-end assemble les fichiers pièce par pièce dans l'ordre.

Principe de reprise du transfert

Il existe actuellement deux méthodes couramment utilisées pour reprendre le transfert, l'une consiste à télécharger des fichiers via l'interface Websocket et l'autre via ajax. Les deux méthodes ont leurs propres avantages. Bien que websocket semble plus haut de gamme, à l'exception de l'utilisation de protocoles différents, les autres algorithmes sont fondamentalement très similaires et le serveur doit ouvrir l'interface ws pour illustrer. l'idée du téléchargement de points d'arrêt.

Après tout, le contenu principal du téléchargement de CV est de « découper » les fichiers, puis de les transférer vers le serveur morceau par morceau. Cependant, ce processus de téléchargement apparemment simple comporte d'innombrables pièges.

La première est l'identification du fichier. Une fois qu'un fichier est divisé en plusieurs parties, comment indiquer au serveur combien de morceaux vous avez coupé et comment le serveur doit finalement fusionner les fichiers que vous avez téléchargés, tout cela doit être fait. être considéré.

Ainsi, avant que le fichier ne commence à être téléchargé, nous devons avoir un processus de « poignée de main » avec le serveur, indiquer au serveur les informations sur le fichier, puis convenir avec le serveur de la taille des tranches après avoir atteint. un consensus avec le serveur, nous pouvons démarrer les fichiers suivants transmis.

Le front-end doit transmettre chaque morceau de fichier au back-end. Après le succès, le front-end et le back-end doivent être marqués pour les points d'arrêt ultérieurs.

Lorsque le transfert de fichier est interrompu, l'utilisateur peut sélectionner à nouveau le fichier et utiliser le logo pour déterminer si une partie du fichier a été téléchargée. Si tel est le cas, nous pouvons alors continuer à télécharger le fichier en fonction du dernier. Progrès pour atteindre la fonction de reprise du téléchargement.

Découpage frontal des fichiers

Avec l'API HTML5 File, couper des fichiers est beaucoup plus simple qu'on ne l'imaginait.

Utilisez simplement la méthode slice

var packet = file.slice(start, end);

Le paramètre start est la position où commence la tranche, et end est la position où le la fin de la tranche est en octets. En contrôlant le début et la fin, vous pouvez réaliser une segmentation de fichiers

telle que :

file.slice(0,1000); 
file.slice(1000,2000); 
file.slice(2000,3000); 
// ......

Téléchargement de fragments de fichiers

Dans la partie précédente, nous avons divisé le fichier en plusieurs morceaux via la méthode slice. La prochaine chose à faire est de transférer ces fragments vers le serveur.

Ici, nous utilisons la requête de publication ajax pour implémenter

var xhr = new XMLHttpRequest(); 
var url = xxx // 文件上传的地址 可以包括文件的参数 如文件名称 分块数等以便后台处理 
xhr.open('POST', url, true); 
xhr.onload = function (e){ 
     // 判断文件是否上传成功，如果成功继续上传下一块，如果失败重试该快 
} 
xhr.upload.onprogress = function(e){ 
     // 选用 如果文件分块大小较大 可以通过该方法判断单片文件具体的上传进度 
     // e.loaded  该片文件上传了多少 
     // e.totalSize 该片文件的总共大小 
} 
xhr.send(packet);

Une fois le fichier téléchargé en arrière-plan, le programme d'arrière-plan tel que PHP répondra en conséquence au traitement.

Ce qui précède est le contenu de la méthode HTML5 pour implémenter la reprise du point d'arrêt de fichier. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (www.php.cn) !