Exemple de partage de barre de progression de fichier de téléchargement Ajax Codular-tutoriel php-php.cn

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>

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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

Vérifiez la sélection fichier
Créer dynamiquement les données de fichier à envoyer
Créer XMLHttpRequest via js
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;
}

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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

结束语

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