Comment implémenter la barre de progression pour le téléchargement de fichiers avec Ajax Codular-js tutoriel-php.cn

Maison

interface Web

js tutoriel

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

php中世界最好的语言

Mar 31, 2018 pm 04:54 PM

ajax 上传文件

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>

Copier après la connexion

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

Copier après la connexion

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

_submit.addEventListener('click', upload);

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

request.upload.addEventListener('progress', function(e){
  _progress.style.width = Math.ceil(e.loaded/e.total) * 100 + '%';
}, false);

Copier après la connexion

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

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

上传文件

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

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

Copier après la connexion

下面给出完整的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);

Copier après la connexion

现在到了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');

Copier après la connexion

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

结束语

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

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

Outils d'IA chauds

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Dissolvant de vêtements AI

Video Face Swap

Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !

Afficher plus

Article chaud

Assassin's Creed Shadows: Solution d'énigmes de coquille

3 Il y a quelques semaines By DDD

Quoi de neuf dans Windows 11 KB5054979 et comment résoudre les problèmes de mise à jour

2 Il y a quelques semaines By DDD

Où trouver la courte de la grue à atomide atomique

3 Il y a quelques semaines By DDD

<🎜>: Dead Rails - Comment relever chaque défi

4 Il y a quelques semaines By DDD

Guide de l'atomfall: emplacements des articles, guides de quête et conseils

1 Il y a quelques mois By DDD

Afficher plus

Outils chauds

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Afficher plus

Sujets chauds

Où se trouve l'entrée de connexion pour la messagerie Gmail ?

7683

Tutoriel Java

1639

Tutoriel CakePHP

1393

Tutoriel Laravel

1286

Tutoriel PHP

1229

Afficher plus

Related knowledge

Les fichiers au format Tmp peuvent-ils être supprimés ? Feb 24, 2024 pm 04:33 PM

Les fichiers au format Tmp sont un format de fichier temporaire généralement généré par un système informatique ou un programme lors de l'exécution. Le but de ces fichiers est de stocker des données temporaires pour aider le programme à fonctionner correctement ou à améliorer les performances. Une fois l'exécution du programme terminée ou l'ordinateur redémarré, ces fichiers tmp ne sont souvent plus nécessaires. Par conséquent, pour les fichiers au format Tmp, ils sont essentiellement supprimables. De plus, la suppression de ces fichiers tmp peut libérer de l'espace sur le disque dur et assurer le fonctionnement normal de l'ordinateur. Cependant, avant de supprimer les fichiers au format Tmp, nous devons

Que faire si le code d'erreur 0x80004005 apparaît. L'éditeur vous apprendra comment résoudre le code d'erreur 0x80004005. Mar 21, 2024 pm 09:17 PM

Lors de la suppression ou de la décompression d'un dossier sur votre ordinateur, une boîte de dialogue d'invite « Erreur 0x80004005 : erreur non spécifiée » apparaît parfois. Comment devez-vous résoudre cette situation ? Il existe en fait de nombreuses raisons pour lesquelles le code d'erreur 0x80004005 est demandé, mais la plupart d'entre elles sont causées par des virus. Nous pouvons réenregistrer la DLL pour résoudre le problème. Ci-dessous, l'éditeur vous expliquera l'expérience de gestion du code d'erreur 0x80004005. . Certains utilisateurs reçoivent le code d'erreur 0X80004005 lors de l'utilisation de leur ordinateur. L'erreur 0x80004005 est principalement due au fait que l'ordinateur n'enregistre pas correctement certains fichiers de bibliothèque de liens dynamiques ou à un pare-feu qui n'autorise pas les connexions HTTPS entre l'ordinateur et Internet. Alors que diriez-vous

Comment transférer des fichiers de Quark Cloud Disk vers Baidu Cloud Disk ? Mar 14, 2024 pm 02:07 PM

Quark Netdisk et Baidu Netdisk sont actuellement les logiciels Netdisk les plus couramment utilisés pour stocker des fichiers. Si vous souhaitez enregistrer les fichiers de Quark Netdisk sur Baidu Netdisk, comment procéder ? Dans ce numéro, l'éditeur a compilé les étapes du didacticiel pour transférer des fichiers d'un ordinateur Quark Network Disk vers Baidu Network Disk. Voyons comment le faire fonctionner. Comment enregistrer les fichiers du disque réseau Quark sur le disque réseau Baidu ? Pour transférer des fichiers de Quark Network Disk vers Baidu Network Disk, vous devez d'abord télécharger les fichiers requis depuis Quark Network Disk, puis sélectionner le dossier cible dans le client Baidu Network Disk et l'ouvrir. Ensuite, faites glisser et déposez les fichiers téléchargés depuis Quark Cloud Disk dans le dossier ouvert par le client Baidu Cloud Disk, ou utilisez la fonction de téléchargement pour ajouter les fichiers sur Baidu Cloud Disk. Assurez-vous de vérifier si le fichier a été transféré avec succès dans Baidu Cloud Disk une fois le téléchargement terminé. C'est ça

Différentes utilisations des barres obliques et des barres obliques inverses dans les chemins de fichiers Feb 26, 2024 pm 04:36 PM

Un chemin de fichier est une chaîne utilisée par le système d'exploitation pour identifier et localiser un fichier ou un dossier. Dans les chemins de fichiers, il existe deux symboles courants séparant les chemins, à savoir la barre oblique (/) et la barre oblique inverse (). Ces deux symboles ont des utilisations et des significations différentes selon les systèmes d'exploitation. La barre oblique (/) est un séparateur de chemin couramment utilisé dans les systèmes Unix et Linux. Sur ces systèmes, les chemins de fichiers partent du répertoire racine (/) et sont séparés par des barres obliques entre chaque répertoire. Par exemple, le chemin /home/user/Docume

Qu'est-ce que le fichier hiberfil.sys ? hiberfil.sys peut-il être supprimé ? Mar 15, 2024 am 09:49 AM

Récemment, de nombreux internautes ont demandé à l'éditeur : quel est le fichier hiberfil.sys ? hiberfil.sys peut-il occuper beaucoup d’espace sur le disque C et être supprimé ? L'éditeur peut vous indiquer que le fichier hiberfil.sys peut être supprimé. Jetons un coup d'œil aux détails ci-dessous. hiberfil.sys est un fichier caché dans le système Windows et également un fichier d'hibernation du système. Il est généralement stocké dans le répertoire racine du lecteur C et sa taille est équivalente à la taille de la mémoire installée du système. Ce fichier est utilisé lorsque l'ordinateur est en veille prolongée et contient les données de mémoire du système actuel afin qu'il puisse être rapidement restauré à son état précédent lors de la récupération. Étant donné que sa taille est égale à la capacité de la mémoire, il peut occuper une plus grande quantité d’espace sur le disque dur. hiberner

Étapes simples pour télécharger votre propre musique sur Kugou Mar 25, 2024 pm 10:56 PM

1. Ouvrez Kugou Music et cliquez sur votre photo de profil. 2. Cliquez sur l'icône des paramètres dans le coin supérieur droit. 3. Cliquez sur [Télécharger des œuvres musicales]. 4. Cliquez sur [Télécharger les travaux]. 5. Sélectionnez la chanson et cliquez sur [Suivant]. 6. Enfin, cliquez sur [Télécharger].

Explication détaillée du rôle des fichiers .ibd dans MySQL et précautions associées Mar 15, 2024 am 08:00 AM

Explication détaillée du rôle des fichiers .ibd dans MySQL et précautions associées MySQL est un système de gestion de base de données relationnelle populaire, et les données de la base de données sont stockées dans différents fichiers. Parmi eux, le fichier .ibd est un fichier de données du moteur de stockage InnoDB, utilisé pour stocker des données et des index dans des tables. Cet article fournira une analyse détaillée du rôle du fichier .ibd dans MySQL et fournira des exemples de code pertinents pour aider les lecteurs à mieux comprendre. 1. Le rôle des fichiers .ibd : stockage des données : les fichiers .ibd sont du stockage InnoDB

PHP et Ajax : créer un moteur de suggestions de saisie semi-automatique Jun 02, 2024 pm 08:39 PM

Créez un moteur de suggestions de saisie semi-automatique en utilisant PHP et Ajax : Script côté serveur : gère les requêtes Ajax et renvoie des suggestions (autocomplete.php). Script client : envoyer une requête Ajax et afficher des suggestions (autocomplete.js). Cas pratique : Incluez le script dans la page HTML et spécifiez l'identifiant de l'élément d'entrée de recherche.

See all articles