PHP jQuery Ajax implémente plusieurs effets de téléchargement d'images_jquery

Ce que je vais partager avec vous aujourd'hui, c'est utiliser PHP jQuery Ajax pour obtenir l'effet de télécharger plusieurs images sans actualiser la page. L'utilisateur n'a qu'à cliquer pour sélectionner l'image à télécharger, puis l'image est automatiquement téléchargée sur le serveur et affichée sur la page.

HTML

Nous plaçons un formulaire sur la page et utilisons post pour le soumettre au gestionnaire php en arrière-plan upload.php. Notez que le paramètre de l'attribut enctype doit prendre en charge le téléchargement de fichiers. #preview est utilisé pour afficher l'image après le téléchargement. Il n'y a aucune explication dans cet article sur le paramètre de style CSS. Veuillez vous référer au code source du package de téléchargement.

Copier le code Le code est le suivant :

                                                                                                                                                                                                                              Ajouter une image           

Maximum 100 Ko, prend en charge les formats jpg, gif et png.

jQuery
Cet exemple est basé sur jQuery, donc la bibliothèque jquery et jquery.wallform.js doivent être chargés dans la page.

Copier le code

Le code est le suivant :

Lorsque vous cliquez sur le bouton "Ajouter une image", une boîte de dialogue de sélection de fichier apparaît. Après avoir sélectionné l'image à télécharger, l'événement de modification est déclenché. Ensuite, le formulaire #imageform appelle la méthode ajaxForm() de jquery.wallform.js, soumet les données du formulaire au PHP d'arrière-plan pour traitement et traite l'affichage des éléments de page en fonction des résultats renvoyés. Si le téléchargement réussit, les images seront affichées sur la page une par une. Concernant l'utilisation de ajaxForm(), vous pouvez vous référer à l'article de ce site : Plug-in de soumission de formulaire Ajax jqery form.

Copier le code

Le code est le suivant :

$(fonction(){

$('#photoimg').die('click').live('change', function(){

       var status = $("#up_status");       var btn = $("#up_btn");           $("#imageform").ajaxForm({ Cible : '#preview',               beforeSubmit:function(){ statut.show();                     btn.hide();

             },

                success:function(){
statut.hide();
                     btn.show();
             },
            erreur :fonction(){
statut.hide();
                     btn.show();
           } }).submit();
});
});

PHP

upload.php traite les téléchargements d'images et enregistre les images téléchargées dans le répertoire uploads/. Notez que le répertoire doit avoir des autorisations en écriture. Tout d'abord, vous devez vérifier si elle est soumise en mode POST, puis déterminer si le format et la taille de l'image répondent aux exigences, puis utiliser move_uploaded_file() pour télécharger l'image et renommer l'image au format : time().rand (100 999).

Copier le code Le code est le suivant :

$path = "téléchargements/"
$extArr = array("jpg", "png", "gif");
if(isset($_POST) et $_SERVER['REQUEST_METHOD'] == "POST"){
$nom = $_FILES['photoimg']['nom']; $size = $_FILES['photoimg']['size']; Si(vide($nom)){
echo 'Veuillez sélectionner l'image à télécharger';
sortir;
}
$ext = extend($nom);
Si(!in_array($ext,$extArr)){
echo 'Le format de l'image est incorrect ! ';
sortir;
}
Si($size>(100*1024)){
echo 'La taille de l'image ne peut pas dépasser 100 Ko';
sortir;
}
$image_name = time().rand(100,999).".".$ext
$tmp = $_FILES['photoimg']['tmp_name']
Si(move_uploaded_file($tmp, $path.$image_name)){
echo ''
}autre{
echo 'Erreur de téléchargement ! ';
}
sortir;
}
//Obtenir le suffixe du type de fichier
function extend($file_name){
$extend = pathinfo($file_name);
$extend = strtolower($extend["extension"]);
Renvoie $étendre
}

Bien sûr, dans les applications réelles, il peut être combiné avec la base de données et le centre utilisateur pour enregistrer les images téléchargées par les utilisateurs dans le tableau de données. Vous pouvez étudier les applications spécifiques par vous-même.

Ce qui précède est tout le contenu partagé avec vous dans cet article, j'espère qu'il vous plaira.