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='container'> <p> Select File: <input type='file' id='_file'> <input type='button' id='_submit' value='Upload!'> </p> <p class='progress_outer'> <p id='_progress' class='progress'></p> </p> </p> <script src='upload.js'></script> </body> </html>
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('_submit'), _file = document.getElementById('_file'), _progress = document.getElementById('_progress');
_submit.addEventListener('click', upload);
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; }
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('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 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
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); } };
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('progress', function(e){ _progress.style.width = Math.ceil(e.loaded/e.total) * 100 + '%'; }, false);
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('POST', 'upload.php'); request.send(data);
Maintenant disponible en PHP...
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
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 = 'error'){ header('Content-Type: application/json'); die(json_encode(array( 'data' => $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');
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!