Barre de progression du fichier de téléchargement Ajax Codular-js tutoriel-php.cn

Cet article présente principalement les informations pertinentes sur la barre de progression du fichier de téléchargement Ajax Codular. Les amis qui en ont besoin peuvent s'y référer

Maintenant, les gens aiment faire autre chose tout en naviguant sur le Web sans quitter la page Web. Habituellement, cela est réalisé via ajax. La plupart du temps, les gens utilisent jQuery pour y parvenir, mais avec l'avancement des navigateurs, nous n'avons plus besoin de le faire. Nous allons présenter ici comment télécharger des fichiers sur le serveur sans quitter la page. , Nous utiliserons le même code PHP backend que celui utilisé dans notre article précédent. Le script téléchargera le fichier sur le serveur, affichera la progression du téléchargement et renverra éventuellement l'adresse du lien du fichier téléchargé. Dans certains cas, vous souhaiterez peut-être le faire. Renvoie l'identifiant du fichier téléchargé ou d'autres informations sur l'application Remarque : Ce code ne prend pas en charge les anciens navigateurs IE. Grâce à Puis-je utiliser, nous prenons uniquement en charge IE10+

Let's Code

Nous commencerons par la structure HTML, puis le JavaScript, puis je vous fournirai le code PHP, qui est adapté du tutoriel 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.

Comme indiqué ci-dessous :

<!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 l'affichage de la barre de progression.

JavaScript

Tout d'abord, nous devons obtenir les balises que nous allons utiliser, elles sont déjà étiquetées avec 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

Ensuite, ajoutez _submit Cliquez sur l'événement pour télécharger le fichier que nous avons sélectionné. Pour ce faire, nous allons utiliser la méthode addEventListener et la laisser appeler la méthode de téléchargement après avoir cliqué sur le bouton

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

Copier après la connexion

Nous pouvons maintenant continuer à traiter le téléchargement, là. sont les étapes suivantes :

Vérifier le fichier sélectionné
Créer dynamiquement les données du fichier à envoyer
via js Créer XMLHttpRequest
Télécharger le fichier

Vérifier le fichier sélectionné

Notre zone de saisie de fichier _file a un paramètre files 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. return directement.

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

Copier après la connexion

Maintenant, nous pouvons nous assurer qu'un fichier est sélectionné, nous supposerons qu'il y a un fichier, n'oubliez pas que l'index du tableau commence par 0.

Créer 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 Semblable à l'attribut name de la zone de saisie, le deuxième paramètre est la 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

Quand. en envoyant des données au serveur plus tard, nous l'utiliserons

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

Cette partie est très basique, nous allons créer un nouveau

et définir certains paramètres. Nous allons d'abord modifier la valeur de XMLHttpRequest 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. onreadystatechange

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

<. 🎜>Lorsque la requête réussit, nous utilisons try. .. catch encapsule le processus d'analyse de la valeur de retour. Si l'analyse échoue, nous créerons notre propre objet de retour afin que le code suivant ne signale pas d'erreur. comment gérer la valeur de retour. Ici, nous l'affichons simplement sur la console.

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

Parlons maintenant de la barre de progression :

C'est un peu compliqué ici. . Nous écoutons un événement. L'objet événement a deux propriétés qui nous préoccupent davantage et total.loaded représente les valeurs qui ont été téléchargées sur le serveur, et total représente la valeur totale à envoyer. calculez un pourcentage basé sur ces deux valeurs pour définir la largeur 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

Remarque : il n'y a aucun ajout ici d'effet d'animation, mais vous pouvez personnaliser l'effet d'animation en fonction de vos besoins <🎜. >

Télécharger le fichier

Maintenant, nous pouvons envoyer la demande, nous allons faire la demande via POST vers un fichier appelé télécharger le fichier .php et utiliser la méthode send() avec le paramètre data afin que nous puissions envoyer des données :

Le code JavaScript complet est donné ci-dessous :

request.open(&#39;POST&#39;, &#39;upload.php&#39;);
request.send(data);

Copier après la connexion

Maintenant disponible en PHP...

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

PHP

C'est le code que nous utilisons, vous remarquerez quelques différences, nous utilisons principalement la méthode top JSON pour renvoyer la valeur. Tous sont sortis au format JSON. Ce PHP est le même que le code dans. l'article précédent, 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é :

Ce qui précède est ce que j'ai compilé pour vous. . J'espère que cela vous sera utile à l'avenir.

<?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

Articles associés :

Méthode jQuery Validator pour vérifier la soumission du formulaire Ajax et la méthode de transmission des paramètres Ajax (tutoriel graphique)

Explications d'exemples de technologie de requête asynchrone Ajax

Le principe de la requête inter-domaines Ajax (tutoriel image et texte)

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!