recherche

Maison >développement back-end >tutoriel php >Exemple de partage de barre de progression de fichier de téléchargement Ajax Codular

Exemple de partage de barre de progression de fichier de téléchargement Ajax Codular

小云云
小云云original
2017-12-26 11:18:381561parcourir

De nos jours, les gens aiment faire d'autres choses tout en parcourant une page Web sans quitter la page Web, ce qui est généralement réalisé via ajax. La plupart du temps, les gens utilisent jQuery pour y parvenir, mais avec les progrès des navigateurs, les gens. Je ne peux pas Cela doit être fait.Cet article présente principalement les informations pertinentes sur la barre de progression du fichier de téléchargement Ajax. Les amis qui en ont besoin peuvent s'y référer. J'espère que cela pourra aider tout le monde.

Ici, nous expliquerons comment télécharger un fichier sur le serveur sans quitter la page, nous utiliserons le même code PHP backend que celui que nous avons utilisé dans notre article précédent. Ce script téléchargera le fichier sur le serveur, à. en même temps, la progression du téléchargement est affichée et enfin l'adresse du lien du fichier téléchargé est renvoyée. Dans certains cas, vous souhaiterez peut-être renvoyer l'identifiant du fichier téléchargé ou d'autres informations d'application. Remarque : ce code ne prend pas en charge les versions plus anciennes. Navigateurs IE, via Puis-je utiliser Nous ne prenons en charge que ie10+

Let's Code

Nous commencerons par la structure HTML, puis JavaScript, puis je vous donnerai le code PHP, ce la partie est adaptée du didacticiel précédent - Il n'y aura pas beaucoup d'explications sur le code PHP.

HTML

Nous n'avons besoin que de deux zones de saisie, l'une est le type de fichier fichier et l'autre est juste un bouton pour que nous puissions l'écouter. cliqué pour envoyer la demande de téléchargement de fichier. Nous aurons également un p dont nous modifierons la largeur pour mettre en évidence l'état du téléchargement.

ressemble à ceci : 


<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS File Upload with Progress</title>
  <style>
  .container {
    width: 500px;
    margin: 0 auto;
  }
  .progress_outer {
    border: 1px solid #000;
  }
  .progress {
    width: 20%;
    background: #DEDEDE;
    height: 20px; 
  }
  </style>
</head>
<body>
  <p class=&#39;container&#39;>
    <p>
      Select File: <input type=&#39;file&#39; id=&#39;_file&#39;> <input type=&#39;button&#39; id=&#39;_submit&#39; value=&#39;Upload!&#39;>
    </p>
    <p class=&#39;progress_outer&#39;>
      <p id=&#39;_progress&#39; class=&#39;progress&#39;></p>
    </p>
  </p>
  <script src=&#39;upload.js&#39;></script>
</body>
</html>

Vous verrez que nous avons écrit un petit style de barre de progression et ajouté un fichier de script en bas pour gérer le téléchargement de fichiers et affichage de la barre de progression.

JavaScript

Tout d'abord, nous devons obtenir les balises que nous allons utiliser, elles ont été marquées par des identifiants.


var _submit = document.getElementById(&#39;_submit&#39;), 
_file = document.getElementById(&#39;_file&#39;), 
_progress = document.getElementById(&#39;_progress&#39;);

Étape suivante, ajoutez un événement click à _submit pour télécharger le fichier que nous avons sélectionné. Pour ce faire, nous utiliserons la méthode addEventListener et la laisserons appeler la méthode de téléchargement après avoir cliqué. le bouton.


_submit.addEventListener(&#39;click&#39;, upload);

Maintenant, nous pouvons continuer le traitement du téléchargement, il y a les étapes suivantes :

  1. Vérifiez la sélection fichier

  2. Créer dynamiquement les données de fichier à envoyer

  3. Créer XMLHttpRequest via js

  4. Télécharger des fichiers

Vérifiez le fichier sélectionné

Notre fichier box_file d'entrée de fichier a un fichier de paramètres pour interroger la file d'attente des fichiers sélectionnés-si vous définissez le paramètre multiple, vous pouvez sélectionner plusieurs fichiers. Nous effectuons une simple vérification et jugeons. Si la longueur du tableau est supérieure à 0, continuez, sinon revenez directement 


if(_file.files.length === 0){
  return;
}

Maintenant. , nous pouvons nous assurer qu'un fichier, nous supposerons qu'il existe un fichier, n'oubliez pas que l'index du tableau commence par 0.

Créez dynamiquement les données du fichier à envoyer

Pour ce faire, nous devons utiliser FormData et y ajouter les données. Ensuite, nous pouvons envoyer notre FormData dans la requête générée à l'étape 3. La méthode d'ajout que nous utilisons, le premier paramètre est similaire au nom. attribut de la zone de saisie, et le deuxième paramètre est la valeur valeur Ici, nous définissons la valeur sur le premier fichier que nous avons sélectionné 


var data = new FormData();
data.append(&#39;SelectedFile&#39;, _file.files[0]);

Nous l'utiliserons lorsque. envoyer des données au serveur plus tard.

Création de XMLHttpRequest via un script de téléchargement

Cette partie est très basique, nous allons créer un nouveau XMLHttpRequest et définir quelques paramètres. Nous allons d'abord modifier la valeur de onreadystatechange pour définir la fonction de rappel lorsque l'état de la requête change. Cette méthode vérifiera readyState lorsque l'état change pour s'assurer que la valeur est celle que nous voulons - dans ce cas, elle est 4, indiquant que le La demande est terminée.

Dans la deuxième étape, nous ajouterons l'événement de progression à l'attribut de téléchargement. De cette façon, nous pourrons obtenir la progression du téléchargement et l'utiliser pour mettre à jour la barre de progression

<.>

var request = new XMLHttpRequest();
request.onreadystatechange = function(){
  if(request.readyState == 4){
    try {
      var resp = JSON.parse(request.response);
    } catch (e){
      var resp = {
        status: &#39;error&#39;,
        data: &#39;Unknown error occurred: [&#39; + request.responseText + &#39;]&#39;
      };
    }
    console.log(resp.status + &#39;: &#39; + resp.data);
  }
};
Lorsque la requête réussit, nous utilisons try...catch pour envelopper le processus d'analyse de la valeur de retour. Si l'analyse échoue, nous créerons notre propre objet de retour afin que le suivant. le code ne signalera pas d'erreur. Vous pouvez décider comment gérer la valeur de retour. Ici, nous l'affichons simplement sur la console.

Parlons maintenant de la barre de progression :


request.upload.addEventListener(&#39;progress&#39;, function(e){
  _progress.style.width = Math.ceil(e.loaded/e.total) * 100 + &#39;%&#39;;
}, false);
C'est un peu compliqué ici, on écoute un événement. L'objet événement a deux attributs qui nous préoccupent davantage et qui représentent au total la valeur qui a été. téléchargé sur le serveur, et le total représente la valeur totale à envoyer. Nous pouvons calculer un pourcentage basé sur ces deux valeurs pour définir la largeur de la barre de progression.

Remarque : aucun effet d'animation n'est ajouté ici, mais vous pouvez personnaliser les effets d'animation en fonction de vos besoins.

Télécharger des fichiers

Nous pouvons maintenant envoyer la demande, nous la demanderons via POST vers un fichier appelé téléchargement .php et utilisez la méthode send() avec les données du paramètre, afin que nous puissions envoyer les données : 


request.open(&#39;POST&#39;, &#39;upload.php&#39;);
request.send(data);
Le code JavaScript complet est donné ci-dessous :


var _submit = document.getElementById(&#39;_submit&#39;), 
_file = document.getElementById(&#39;_file&#39;), 
_progress = document.getElementById(&#39;_progress&#39;);
var upload = function(){
  if(_file.files.length === 0){
    return;
  }
  var data = new FormData();
  data.append('SelectedFile', _file.files[0]);
  var request = new XMLHttpRequest();
  request.onreadystatechange = function(){
    if(request.readyState == 4){
      try {
        var resp = JSON.parse(request.response);
      } catch (e){
        var resp = {
          status: 'error',
          data: 'Unknown error occurred: [' + request.responseText + ']'
        };
      }
      console.log(resp.status + ': ' + resp.data);
    }
  };
  request.upload.addEventListener('progress', function(e){
    _progress.style.width = Math.ceil(e.loaded/e.total) * 100 + '%';
  }, false);
  request.open('POST', 'upload.php');
  request.send(data);
}
_submit.addEventListener(&#39;click&#39;, upload);
Maintenant à PHP...

PHP

C'est le code que nous utilisons, vous remarquerez quelques différences, principalement que nous utilisons la méthode top JSON pour renvoyer la valeur et la sortir au format JSON. Ce PHP est différent du code de l'article précédent Le même, ce qui signifie que cette méthode ne s'applique qu'aux images PNG inférieures à 500 Ko. De plus, le message de réussite renverra le chemin du fichier téléchargé : 


<?php
// Output JSON
function outputJSON($msg, $status = &#39;error&#39;){
  header(&#39;Content-Type: application/json&#39;);
  die(json_encode(array(
    &#39;data&#39; => $msg,
    &#39;status&#39; => $status
  )));
}
// Check for errors
if($_FILES[&#39;SelectedFile&#39;][&#39;error&#39;] > 0){
  outputJSON(&#39;An error ocurred when uploading.&#39;);
}
if(!getimagesize($_FILES[&#39;SelectedFile&#39;][&#39;tmp_name&#39;])){
  outputJSON(&#39;Please ensure you are uploading an image.&#39;);
}
// Check filetype
if($_FILES[&#39;SelectedFile&#39;][&#39;type&#39;] != &#39;image/png&#39;){
  outputJSON(&#39;Unsupported filetype uploaded.&#39;);
}
// Check filesize
if($_FILES[&#39;SelectedFile&#39;][&#39;size&#39;] > 500000){
  outputJSON(&#39;File uploaded exceeds maximum upload size.&#39;);
}
// Check if the file exists
if(file_exists(&#39;upload/&#39; . $_FILES[&#39;SelectedFile&#39;][&#39;name&#39;])){
  outputJSON(&#39;File with that name already exists.&#39;);
}
// Upload file
if(!move_uploaded_file($_FILES[&#39;SelectedFile&#39;][&#39;tmp_name&#39;], &#39;upload/&#39; . $_FILES[&#39;SelectedFile&#39;][&#39;name&#39;])){
  outputJSON(&#39;Error uploading file - check destination is writeable.&#39;);
}
// Success!
outputJSON(&#39;File uploaded successfully to "&#39; . &#39;upload/&#39; . $_FILES[&#39;SelectedFile&#39;][&#39;name&#39;] . &#39;".&#39;, &#39;success&#39;);

如果将所有内容都放在一起，您应该可以将文件上传到您期望的位置，并在浏览器的控制台内成功返回。

结束语

还有一些比较容易而又有效的方式来增强用户体验.通过将文件队列的多个文件加入到FormData,可以实现多文件上传. 有一点要说明,如果你是在本地做测试,你可能没办法看到进度条逐步变化,这取决于你本地机器的上传速度,我建议在服务器上使用较大的png文件做测试.

相关推荐：

PHP利用APC模块实现上传进度条的实例分享

实例讲解Ajax实现简单带百分比进度条

JavaScript控制进度条的实例分析

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!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Exemple détaillé d'obtention rapide d'objets de communication AjaxArticle suivant：Exemple détaillé d'obtention rapide d'objets de communication Ajax

Articles Liés

Voir plus