Introduction détaillée à l'API HTML5 File pour implémenter la reprise du point d'arrêt

Actuellement, la plupart des sites Web du marché nécessitent l'installation de plug-ins de navigateur pour le téléchargement de points d'arrêt. Cet article est destiné aux environnements de navigateur avancés, via HTML5 Fichier api. Implémenter le téléchargement de points d'arrêt pour explication

1. Implémenter la sélection de fichiers multiples

L'attribut de HTML5 a ajouté l'attribut "multiple", qui peut accepter plusieurs valeurs. Champ

<input type="file" multiple="multiple" name="file" id="file">

Avec cet attribut ajouté, les utilisateurs peuvent sélectionner plusieurs fichiers à la fois dans la boîte de dialogue contextuelle

2. Implémenter le téléchargement de fichiers à partir de la fonction de glisser l'ordinateur à la page Web et en ajoutant la file d'attente des fichiers

Ici, nous utilisons les événements de glisser-déposer pour gérer la fonction de déplacement de fichiers

Le glisser-déposer est utilisé pour gérer lors du déplacement sur l'événement spécifié, ici. nous lions le temps de glisser au corps pour gérer l'événement de glisser le fichier sur la page

document.body.addEventListener('dragover', dragFile, false);
function dragFile(evt) {
 evt.stopPropagation();
 evt.preventDefault();
 evt.dataTransfer.dropEffect = 'copy';
}

Utilisez l'événement drop pour gérer l'événement lorsque la souris est relâchée À ce moment, l'utilisateur devrait être. glissé Les fichiers sont ajoutés à la file d'attente de téléchargement pour un traitement ultérieur

document.body.addEventListener('drop', dropFile, false);
function dragFile(evt) {
 evt.stopPropagation();
 evt.preventDefault();
 // dataTransfer.files属性可以获取到所有拖动选择的文件，通过遍历可以读取到所有文件的信息。
 // 遍历每个文件可以获取到文件的 name、size、type、lastModifiedDate等关键信息
 var files = evt.dataTransfer.files;
 // addfile 方法 用来添加上传文件队列，在input的change事件中也需要调用
 // 该方法首先检查有无文件正在上传中，如果有就将后续加入的文件放到上传队列中，如果没有文件正在上传就直接执行上传命令
 addfile(files);
}

3. Principe de reprise des fichiers

Il existe deux méthodes couramment utilisées pour reprendre le téléchargement aux points d'arrêt, l'une est l'autre. pour télécharger des fichiers via l'interface websocket, et l'autre via 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 côté serveur. activez l'interface ws, l'ajax relativement pratique est utilisé pour illustrer l'idée du téléchargement de point 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.

4. 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 des tranches

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

• 
  

Le paramètre start est la position où commence la tranche, et end est la position où se termine la tranche. Les unités sont toutes des 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);
// ......

5. Télécharger des fragments de fichiers

Dans la partie précédente, nous avons utilisé la méthode slice pour télécharger des fichiers Divisés en plusieurs morceaux, la prochaine chose à faire est de transférer ces fragments vers le serveur.

Ici, nous utilisons la

demande de publication d'Ajax pour implémenter

textpop-up

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!