Télécharger plusieurs images à l'aide d'AJAX, PHP et jQuery
Télécharger plusieurs images à l'aide d'AJAX peut être difficile si vous n'êtes pas familier avec le processus. Cet article vous guidera à travers les étapes à suivre, en mettant en évidence les composants clés du code HTML, jQuery/AJAX et PHP. Nous fournirons également un exemple de code fonctionnel pour illustrer la solution.
HTML
Le code HTML définit le formulaire dans lequel les utilisateurs peuvent sélectionner plusieurs images à télécharger. Il contient un champ de saisie avec l'attribut multiple, qui permet aux utilisateurs de sélectionner plusieurs images à la fois. Nous ajouterons également une barre de progression pour chaque fichier pour indiquer l'état du téléchargement.
<form>
jQuery/AJAX
Le code jQuery/AJAX gère le téléchargement du fichier. processus. Nous utilisons l'événement change pour déclencher le téléchargement lorsque l'utilisateur sélectionne les fichiers. Nous parcourons ensuite chaque fichier sélectionné, créant une nouvelle barre de progression pour chaque fichier.
$(document).on("change", "input[name^='file']", function(e){ e.preventDefault(); var This = this, display = $("#uploads"); // list all file data $.each(This.files, function(i, obj){ // for each image run script asynchronous (function(i) { // get data from input file var file = This.files[i], name = file.name, size = file.size, type = file.type, lastModified = file.lastModified, lastModifiedDate = file.lastModifiedDate, webkitRelativePath = file.webkitRelativePath, //slice = file.slice, i = i; // DEBUG /* var acc = [] $.each(file, function(index, value) { acc.push(index + ": " + value); }); alert(JSON.stringify(acc)); */ $.ajax({ url:'/ajax/upload.php', contentType: "multipart/form-data", data:{ "image": { "name":name, "size":size, "type":type, "lastModified":lastModified, "lastModifiedDate":lastModifiedDate, "webkitRelativePath":webkitRelativePath, //"slice":slice, } }, type: "POST", // Custom XMLHttpRequest xhr: function() { var myXhr = $.ajaxSettings.xhr(); // Check if upload property exists if(myXhr.upload) { // For handling the progress of the upload myXhr.upload.addEventListener("progress",progressHandlingFunction, false); } return myXhr; }, cache: false, success : function(data){ // load ajax data $("#listTable").append(data); } }); // display progress function progressHandlingFunction(e){ if(e.lengthComputable){ var perc = Math.round((e.loaded / e.total)*100); perc = ( (perc >= 100) ? 100 : ( (perc <= 0) ? 0 : 0 ) ); $("#progress"+i+" > div") .attr({"aria-valuenow":perc}) .css("width", perc+"%"); } } // display list of files display.append('<li>'+name+'</li><div class="progress">
PHP
Enfin, le code PHP gère le téléchargement du fichier sur le côté serveur. Il reçoit les fichiers téléchargés et les traite.
<?php if (isset($_POST["image"])) { // do php stuff // call `json_encode` on `file` object $file = json_encode($_POST["file"]); // return `file` as `json` string echo $file; } ?>
Conclusion
En combinant ces composants, nous pouvons réaliser le téléchargement de plusieurs images en utilisant AJAX, PHP et jQuery. Cette fonctionnalité permet aux utilisateurs de télécharger facilement plusieurs images à la fois, améliorant ainsi l'expérience utilisateur et rationalisant le processus de téléchargement de fichiers.
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!