JQUERY AJAX Image Téléchargez l'exemple de vignette

Cet article montre comment télécharger des images à l'aide d'Ajax et afficher une prévisualisation miniature sans rechargement de page. Le processus implique JavaScript côté client pour gérer le téléchargement et un backend PHP pour la génération de miniatures et le stockage d'images.

côté client (javascript):

La fonctionnalité de base réside dans la fonction uploadImage, qui utilise $.ajaxFileUpload pour envoyer l'image au serveur. Lors du téléchargement réussi, le serveur renvoie les données JSON contenant les URL pour les images d'origine et de vignette. Le JavaScript met ensuite à jour l'attribut src des éléments d'image (#image-thumb, représentant l'aperçu) pour afficher la vignette. Les indicateurs de gestion des erreurs et de chargement sont également inclus.

uploadImage: function() {
    // ... (Existing code) ...
    $.ajaxFileUpload({
        // ... (Existing code) ...
        success: function(data) {
            // Update image preview
            _this.cache.$imgPreview.attr('src', data.thumb.img_src);
            _this.cache.$imgOriginal.attr('src', data.master.img_src);
            // ... (Existing code) ...
        },
        error: function(xhr, textStatus, errorThrown) {
            // ... (Existing code) ...
        },
        complete: function() {
            // ... (Existing code) ...
        }
    });
}

L'élément d'aperçu de l'image est initialement défini avec une image d'espace réservé:

<img src="/static/imghwm/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/174036625652715.jpg?x-oss-process=image/resize,p_40"  class="lazy" alt="jQuery AJAX Image Upload Thumbnail Example " />

La soumission de formulaire comprend l'attribut src de la miniature:

submitForm: function() {
    // ... (Existing code) ...
    formData += '&image-thumb=' + $('#image-thumb').attr('src');
    // ... (Existing code) ...
}

côté serveur (php):

Le script PHP reçoit l'image téléchargée, génère une vignette à l'aide d'une bibliothèque de manipulation d'image appropriée (par exemple, GD ou ImageMagick) et renvoie les URL des images originales et miniatures en tant que JSON. Les images sont initialement enregistrées dans un répertoire temporaire et déplacées vers l'emplacement final lors de la soumission du formulaire.

Considérations de sécurité:

Le script souligne l'importance de définir les autorisations de fichiers appropriées (par exemple, 774) sur le répertoire d'image pour éviter un accès non autorisé. D'autres mesures de sécurité, telles que la validation du type de fichier et les limites de taille, sont recommandées.

Questions fréquemment posées (FAQ):

L'article se termine par une section FAQ traitant des préoccupations courantes concernant les téléchargements d'images multiples, les barres de progression, la validation des fichiers, la gestion des erreurs, le redimensionnement d'images, les téléchargements sans formulaire, la sécurité, le stockage de la base de données, l'affichage de l'image et la suppression d'image. Ces FAQ fournissent des informations précieuses sur les meilleures pratiques pour des fonctionnalités de téléchargement d'images robustes. Les solutions proposées sur levier diverses techniques comme l'API de fichier HTML5, l'API Canvas et la validation côté serveur.

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!