Apprenez à utiliser Session et Javascript pour implémenter la fonction de barre de progression du téléchargement de fichiers en PHP

Les applications Web doivent souvent fournir des fonctions de téléchargement de fichiers. Les scénarios typiques incluent le téléchargement d'avatars d'utilisateurs, le téléchargement de photos d'album, etc. Lorsque le fichier à télécharger est relativement volumineux, il est nécessaire de prévoir une barre de progression indiquant la progression du téléchargement.

Avant PHP 5.4, il n'était pas facile d'implémenter une telle barre de progression. Il y avait trois méthodes principales :

• Utiliser Flash, Java, ActiveX

• Utilisez l'extension APC de PHP

• Utilisez l'API de fichier HTML5

Recommandations d'apprentissage associées :

PHP Programmation du débutant au compétent

La première méthode repose sur des plug-ins de navigateur tiers, qui ne sont pas assez polyvalents et peuvent facilement entraîner des risques de sécurité. Cependant, en raison de l’utilisation généralisée de Flash, de nombreux sites Web utilisent encore Flash comme solution.

L'inconvénient de la deuxième méthode est qu'elle nécessite l'installation de la bibliothèque d'extensions APC de PHP et oblige l'utilisateur à contrôler la configuration côté serveur. De plus, si vous installez APC uniquement pour implémenter une barre de progression de téléchargement, c'est évidemment un peu exagéré.

La troisième méthode devrait être la méthode la plus idéale. Elle ne nécessite pas de support côté serveur et utilise uniquement Javascript côté navigateur. Cependant, comme le standard HTML5 n’a pas encore été établi et que le support des différents fabricants de navigateurs est différent, cette méthode est encore difficile à vulgariser.

La fonction de surveillance de la progression du téléchargement basée sur la session (session.upload_progress) introduite dans PHP 5.4 fournit une solution de surveillance de la progression du téléchargement côté serveur. Après la mise à niveau vers PHP 5.4, vous n'avez pas besoin d'installer l'extension APC. Vous pouvez implémenter la barre de progression du téléchargement en utilisant uniquement PHP natif et Javascript frontal.

Nous allons maintenant présenter en détail la nouvelle fonctionnalité session.upload_progress de PHP 5.4.

Introduction au principe

Lorsque le navigateur télécharge un fichier sur le serveur, PHP télécharge les informations détaillées du fichier (telles que l'heure de téléchargement, la progression du téléchargement, etc. ) est stocké dans la session. Ensuite, au fur et à mesure que le téléchargement progresse, les informations de la session sont périodiquement mises à jour. De cette façon, le navigateur peut utiliser Ajax pour demander périodiquement un script côté serveur, et le script renvoie les informations de progression dans la session ; le Javascript côté navigateur peut afficher/mettre à jour la barre de progression en fonction de ces informations.

Alors, comment les informations de téléchargement de fichiers sont-elles stockées ? Comment y accède-t-on ? Expliquons en détail ci-dessous.

Certains éléments de configuration ont été introduits dans PHP 5.4 (définis dans php.ini)

Le code est le suivant :

session.upload_progress.enabled = "1"
session.upload_progress.cleanup = "1"
session.upload_progress.prefix = "upload_progress_"
session.upload_progress.name = "PHP_SESSION_UPLOAD_PROGRESS"
session.upload_progress.freq = "1%"
session.upload_progress.min_freq = "1"

Parmi eux, activé contrôle si la fonction upload_progress est activé ou non. Par défaut, Activer le nettoyage définit s'il faut effacer les informations relatives à la session après la soumission de la demande de téléchargement de fichier. Il est activé par défaut.

Le préfixe et le nom sont utilisés pour définir le nom de la variable/le nom de la clé où les informations de progression sont stockées dans la session. Voir ci-dessous pour une utilisation détaillée de ces deux éléments.

freq et min_freq sont utilisés pour définir la fréquence de mise à jour des informations de progression côté serveur. La configuration correcte de ces deux éléments peut réduire la charge sur le serveur.

Dans le formulaire de téléchargement de fichiers, vous devez définir un identifiant pour ce téléchargement et utiliser cet identifiant pour référencer les informations de progression dans le processus ultérieur. Plus précisément, il doit y avoir une entrée cachée dans le formulaire de téléchargement, dont l'attribut name est la valeur de session.upload_progress.name dans php.ini, sa valeur est un identifiant défini par vous-même ; Comme suit :

Le code est le suivant :

<input type="hidden"
    name="<?php echo ini_get(&#39;session.upload_progress.name&#39;); ?>"
    value="test" />

Après avoir reçu le formulaire de téléchargement de fichier, PHP créera une nouvelle clé dans la variable $_SESSION. Le nom de la clé est la valeur de la session. upload_progress.prefix et ce qui précède La chaîne obtenue après concaténation de vos identifiants personnalisés peut être obtenue comme ceci :

Le code est le suivant :

$name = ini_get('session.upload_progress.name');
$key = ini_get('session.upload_progress.prefix') . $_POST[$name];
$_SESSION[$key]; // 这里就是此次文件上传的进度信息了

La structure de cette variable est la suivante : $_SESSION[$key]

Le code est le suivant :

$_SESSION["upload_progress_test"] = array(
 "start_time" => 1234567890,   // 开始时间
 "content_length" => 57343257, // POST请求的总数据长度
 "bytes_processed" => 453489,  // 已收到的数据长度
 "done" => false,              // 请求是否完成 true表示完成，false未完成
 // 单个文件的信息
 "files" => array(
  0 => array( ... ),
  // 同一请求中可包含多个文件
  1 => array( ... ),
 )
);

De cette façon, nous pouvons utiliser les deux éléments content_length et bytes_processed pour obtenir le pourcentage de progression.

Exemple de programme

Maintenant que le principe a été introduit, implémentons complètement une barre de progression de téléchargement de fichiers basée sur PHP et Javascript.

Formulaire de téléchargement

Tout d'abord, écrivons notre page de formulaire de téléchargement index.php, le code est le suivant :

Le code est comme suit :

<form id="upload-form"
    action="upload.php" method="POST" enctype="multipart/form-data"
    style="margin:15px 0" target="hidden_iframe">
        <input type="hidden" name="" value="test" />
        <p><input type="file" name="file1" /></p> 
        <p><input type="submit" value="Upload" /></p>
</form>    
<iframe id="hidden_iframe" name="hidden_iframe" src="about:blank" style="display:none;"></iframe>
<p id="progress" class="progress" style="margin-bottom:15px;display:none;">
        <p class="bar" style="width:0%;"></p>
        <p class="label">0%</p>
</p>

Faites attention à l'élément caché session.upload_progress.name dans le formulaire, et la valeur est définie sur test. Il n’y a qu’une seule entrée de téléchargement de fichier dans le formulaire, vous pouvez en ajouter plusieurs si nécessaire.

Une attention particulière doit être accordée à l'attribut target du formulaire ici. Le paramètre ici pointe vers une iframe dans la page actuelle. Ceci est crucial. En définissant l'attribut target, la page après la soumission du formulaire est affichée dans l'iframe, évitant ainsi le saut de page en cours. Car il faut encore afficher la barre de progression sur la page en cours.

Ce p permet d'afficher la barre de progression. #progress

Remarque : N'oubliez pas d'ajouter session_start() au début de index.php.

Traitement du fichier téléchargé

L'action du formulaire pointe vers upload.php Nous traitons le fichier téléchargé dans upload.php et le transférons dans le répertoire actuel. Il n'y a aucune différence avec le traitement de téléchargement habituel.

代码如下:

if(is_uploaded_file($_FILES['file1']['tmp_name'])){
        move_uploaded_file($_FILES['file1']['tmp_name'], "./{$_FILES['file1']['name']}");
}
?>

Ajax获取进度信息

这一步是关键，我们需要建立一个 progress.php 文件，用来读取session中的进度信息; 然后我们在 index.php 中增加Javascript代码，向 progress.php 发起Ajax请求，然后根据获得的进度信息更新进度条。

progress.php 的代码如下：

代码如下:

session_start();
$i = ini_get('session.upload_progress.name');
$key = ini_get("session.upload_progress.prefix") . $_GET[$i];
if (!empty($_SESSION[$key])) {
        $current = $_SESSION[$key]["bytes_processed"];
        $total = $_SESSION[$key]["content_length"];
        echo $current < $total ? ceil($current / $total * 100) : 100;
}else{
        echo 100;
}
?>

在这里我们获得$_SESSION变量中的进度信息，然后输出一个进度百分比。

在 index.php 中，我们将如下代码添加到页面底部 (为简便，这里使用jQuery):

代码如下:

function fetch_progress(){
        $.get('progress.php',{ '' : 'test'}, function(data){
                var progress = parseInt(data);
                $('#progress .label').html(progress + '%');
                $('#progress .bar').css('width', progress + '%');
                if(progress < 100){
                        setTimeout(&#39;fetch_progress()&#39;, 100);
                }else{
            $(&#39;#progress .label&#39;).html(&#39;完成!&#39;);
        }
        }, &#39;html&#39;);
}
$(&#39;#upload-form&#39;).submit(function(){
        $(&#39;#progress&#39;).show();
        setTimeout(&#39;fetch_progress()&#39;, 100);
});

当#upload-form被提交时，我们把进度条显示出来，然后反复调用 fetch_progress() 获得进度信息，并更新进度条，直到文件上传完毕，显示'完成!'。

注意事项

input标签的位置

name为session.upload_progress.name的input标签一定要放在文件input 的前面。

取消上传

通过设置 $_SESSION[$key]['cancel_upload'] = true 可取消当次上传。但仅能取消正在上传的文件和尚未开始的文件。已经上传成功的文件不会被删除。

setTimeout vs. setInterval

应该通过 setTimeout() 来调用 fetch_progress()，这样可以确保一次请求返回之后才开始下一次请求。如果使用 setInterval() 则不能保证这一点，有可能导致进度条出现'不进反退'。

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!