Maison > Article > interface Web > Comment implémenter la barre de progression pour le téléchargement de fichiers avec Ajax Codular

Comment implémenter la barre de progression pour le téléchargement de fichiers avec Ajax Codular

php中世界最好的语言original: 2018-03-31 16:54:341652parcourir

Cette fois, je vais vous montrer comment implémenter Codular comme barre de progression pour le téléchargement de fichiers avec Ajax Quelles sont les précautions pour qu'Ajax implémente Codular comme barre de progression pour le téléchargement de fichiers. Voici une méthode pratique. cas, jetons un coup d'oeil.

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 l'avancement de. navigateurs, les gens n'ont pas besoin de le faire. Ici, nous expliquerons comment télécharger un fichier sur un 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. le fichier sur le serveur, affiche la progression du téléchargement et enfin renvoie l'adresse du lien du fichier téléchargé. 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 antérieures. navigateur ie, par Puis-je utiliser, nous ne prenons en charge que ie10+

Let's Code

Nous allons commencer par la structure HTML, puis JavaScript, je vais ensuite vous fournir le code PHP, 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 :

Vous verrez que nous avons écrit un petit style de barre de progression et ajouté un fichier de script en bas pour

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

traiter le fichier

télécharger 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à marquées d'identifiants.

Down Dans la première étape, 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é sur le bouton

var _submit = document.getElementById('_submit'), 
_file = document.getElementById('_file'), 
_progress = document.getElementById('_progress');

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

_submit.addEventListener('click', upload);

Vérifier le fichier sélectionné

Créer dynamiquement le fichier données de fichier à envoyer
Créer XMLHttpRequest via js
Télécharger le fichier

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

Maintenant que nous pouvons nous assurer qu'un fichier est sélectionné, nous supposerons qu'il existe un fichier, rappelez-vous que l'index du tableau commence par 0.

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

Données de fichier créées dynamiquement à 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. Nous utilisons la méthode append, le premier paramètre est similaire à l'attribut name de la zone de saisie et le deuxième paramètre est la valeur Ici, nous définissons la valeur du premier fichier que nous avons sélectionné.

Quand nous le spécifierons plus tard Nous l'utiliserons lorsque le serveur enverra des données

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

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 quelques paramètres. Nous allons d'abord modifier la valeur de

pour définir la fonction de rappel

XMLHttpRequest lorsque l'état demandé 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, représente l'achèvement de la demande. onreadystatechange Dans la deuxième étape, nous ajouterons l'événement de progression sur l'attribut de téléchargement. De cette façon, nous pouvons obtenir la progression du téléchargement pour mettre à jour la barre de progression. 🎜>Lorsque la requête réussit Enfin, 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 code suivant ne signale pas de message. erreur. Vous pouvez décider comment gérer la valeur de retour, ici nous l'utilisons simplement Sortie vers la console.

Parlons maintenant de 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: '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);

这里有一点点复杂,我们监听一个事件,该事件对象有两个我们比较关注的属性,loaded和total.loaded表示已经上传到服务器端的数值,total表示要发送的总数值,我们可以根据这两个值计算一个百分比,来设置进度条的宽度.

Note: 这里没有加入任何动画特效,但你可以根据需要自定义动画效果.

上传文件

现在我们可以发送请求，我们将通过POST请求到一个名为upload.php的文件，并使用send（）方法，参数为data，这样我们就可以发送数据:

request.open('POST', 'upload.php');
request.send(data);

下面给出完整的JavaScript代码:

var _submit = document.getElementById('_submit'), 
_file = document.getElementById('_file'), 
_progress = document.getElementById('_progress');
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('click', upload);

现在到了PHP...

PHP

这是我们使用的代码,你将注意到一些区别,主要是我们用最上面的JSON方法来返回值都作为JSON格式输出.这个PHP与之前文章中的代码相同,这也就意味着该方法只适用于小于500Kb的PNG图片.此外,成功信息将返回已上传文件的路径:

<?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,
    'status' => $status
  )));
}
// Check for errors
if($_FILES['SelectedFile']['error'] > 0){
  outputJSON('An error ocurred when uploading.');
}
if(!getimagesize($_FILES['SelectedFile']['tmp_name'])){
  outputJSON('Please ensure you are uploading an image.');
}
// Check filetype
if($_FILES['SelectedFile']['type'] != 'image/png'){
  outputJSON('Unsupported filetype uploaded.');
}
// Check filesize
if($_FILES['SelectedFile']['size'] > 500000){
  outputJSON('File uploaded exceeds maximum upload size.');
}
// Check if the file exists
if(file_exists('upload/' . $_FILES['SelectedFile']['name'])){
  outputJSON('File with that name already exists.');
}
// Upload file
if(!move_uploaded_file($_FILES['SelectedFile']['tmp_name'], 'upload/' . $_FILES['SelectedFile']['name'])){
  outputJSON('Error uploading file - check destination is writeable.');
}
// Success!
outputJSON('File uploaded successfully to "' . 'upload/' . $_FILES['SelectedFile']['name'] . '".', 'success');

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

结束语

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

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

Articles Liés

Voir plus