Quel est le principe du transfert de CV ? Comment utiliser HTML5 pour obtenir un point d'arrêt de reprise du téléchargement 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 un fichier 🎜>, la. l'autre passe par ajax, les deux méthodes ont leurs propres avantages et inconvénients. 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. Ici, nous utilisons ajax relativement pratique. 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 » le fichier, puis de le transférer morceau par morceau sur le serveur. 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

Le paramètre start est la position où la tranche commence, et end est la position où la tranche se termine. Les unités sont toutes des octets. En contrôlant le début et la fin, vous pouvez réaliser une segmentation de fichiers

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

telle que :

Télécharger des fragments de fichiers

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

Dans la partie précédente, nous avons utilisé la méthode slice pour diviser le fichier dans Après avoir obtenu quelques morceaux, la prochaine chose à faire est de transférer ces fragments sur le serveur.

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

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

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

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!