Maison > Article > développement back-end > Amélioration de l'expérience : guide de développement de l'interface utilisateur pour le téléchargement HTTP asynchrone PHP de plusieurs fichiers
Améliorer l'expérience : guide de développement d'interface utilisateur pour le téléchargement HTTP asynchrone PHP de plusieurs fichiers
Introduction :
Dans les applications Web modernes, le téléchargement de fichiers est l'une des fonctions les plus courantes. Cependant, lorsque plusieurs fichiers doivent être téléchargés, la méthode de téléchargement synchrone traditionnelle peut amener les utilisateurs à attendre trop longtemps. Afin d'améliorer l'expérience utilisateur, nous pouvons utiliser la fonction de requête HTTP asynchrone de PHP pour réaliser le téléchargement simultané de plusieurs fichiers. Cet article vous fournira un guide détaillé pour vous aider à développer une fonction de téléchargement asynchrone avec une bonne interface utilisateur.
1. Comprendre le téléchargement HTTP asynchrone
Le téléchargement HTTP synchrone traditionnel télécharge les fichiers un par un dans l'ordre, tandis que le téléchargement HTTP asynchrone lance plusieurs requêtes HTTP en même temps et télécharge plusieurs fichiers en parallèle. Cela peut réduire considérablement le temps d’attente des utilisateurs et améliorer la vitesse de téléchargement et l’expérience utilisateur.
2. Préparation
Avant de commencer le développement, nous devons nous assurer que l'extension cURL est installée dans votre environnement PHP. Vous pouvez vérifier s'il est installé en exécutant la commande suivante :
$ php -m | grep curl
Si le nom de l'extension curl n'est pas affiché, elle doit être installée. Sur les systèmes Ubuntu, vous pouvez utiliser la commande suivante pour installer :
$ sudo apt-get install php-curl
3. Développer une fonction de téléchargement asynchrone
<form action="download.php" method="POST"> <input type="checkbox" name="files[]" value="file1"> <input type="checkbox" name="files[]" value="file2"> <input type="checkbox" name="files[]" value="file3"> <button type="submit">下载</button> </form>
<?php $files = $_POST['files']; // 获取用户选择的文件 $mh = curl_multi_init(); // 初始化curl多个句柄 foreach ($files as $file) { $ch = curl_init(); // 初始化curl句柄 curl_setopt($ch, CURLOPT_URL, "http://example.com/files/$file"); // 设置要下载的文件URL curl_setopt($ch, CURLOPT_RETURNTRANSFER, true); // 设置返回结果为字符串 curl_multi_add_handle($mh, $ch); // 添加curl句柄到并行处理中 } do { $status = curl_multi_exec($mh, $running); // 执行并行处理 } while ($status === CURLM_CALL_MULTI_PERFORM || $running); foreach ($files as $file) { $ch = curl_multi_getcontent($ch); // 获取文件内容 file_put_contents($file, $content); // 将文件内容写入本地文件 curl_multi_remove_handle($mh, $ch); // 移除curl句柄 } curl_multi_close($mh); // 关闭curl多句柄 ?>
<progress id="progress" value="0" max="100"></progress>
En JavaScript, nous pouvons utiliser l'objet XMLHttpRequest pour obtenir la progression du téléchargement et mettre à jour la valeur de la barre de progression :
var progress = document.getElementById('progress'); var xhr = new XMLHttpRequest(); xhr.addEventListener('progress', function(e) { if (e.lengthComputable) { var percent = (e.loaded / e.total) * 100; progress.value = percent; } }); xhr.open('GET', 'download.php', true); xhr.send();
4. Résumé
Téléchargez plusieurs fichiers de manière asynchrone via PHP HTTP, nous pouvons grandement améliorer l'expérience utilisateur et accélérer les téléchargements de fichiers. Pendant le processus de développement, nous devons nous assurer que l'extension cURL a été installée dans l'environnement PHP et suivre les étapes pour créer le formulaire de téléchargement, le script de traitement de téléchargement asynchrone et ajouter une barre de progression du téléchargement. Avec le développement d'applications Web, l'amélioration de l'expérience utilisateur deviendra la priorité des développeurs, et la fonction de téléchargement HTTP asynchrone deviendra un outil important pour atteindre cet objectif. Amusons-nous à créer de meilleures interfaces utilisateur !
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!