Comment télécharger des images en utilisant Ajax

Instructions

1. Télécharger le script jQuery et jQuery Fichier Multiple Upload Plugin (voir les références pour le lien) et de les placer dans le même répertoire. Créer votre page Web, un lien vers les scripts dans la section de la tête de votre code HTML comme suit:

   Changer la "src" valeurs si les noms de fichiers sont différents pour les versions de script que vous avez téléchargés, que ceux-ci changent souvent. Enregistrez votre fichier avec ".php" extension dans le même répertoire que les scripts.

2. 
   
   
   

   Ajouter le formulaire de téléchargement à votre page Web en incluant le code suivant entre l'ouverture et la fermeture tags:

   <iframe id="load_frame" name="load_frame" src="img_load.php">

   L'iframe est où le succès ou l'échec de téléchargement seront indiqués, et permet le processus d'effectuer sans passer à une nouvelle page.

3. Créez le code côté serveur pour gérer le téléchargement de vos images. Créez un nouveau fichier et sauvegardez- "img_load.php" entrant le code suivant:

   lt;? php

   
   
   
   
   

   if (isset ($ _ POST ['upload']))

   {Uploaddir $ 'uploadedimgs /' =;

   foreach ($ _FILES ["img"] ["erreur"] Que $ index = gt; $ status)

   {If ($ status == UPLOAD_ERR_OK)

   {$ Temp = $ _FILES ["img"] ["tmp_name"] [$ index];

   file_ref $ = $ _FILES ["img"] ["nom"] [$ index];

   FILE_LOCATION $ = $ uploaddir. basename (file_ref $);

   si (move_uploaded_file ($ temp, FILE_LOCATION $))

   {Echo "

   Votre fichier (". $ file_ref.") A été téléchargé!

   "-}

   autre

   {Echo "

   Oops! Votre fichier (". $ file_ref.") A été pas téléchargé.

   "-}}}}

   ?gt;

   Bien que figurant dans un fichier séparé, ce code sera exécuté à l'intérieur de la page principale iframe, comme il est répertorié comme la source et est spécifié comme cible pour soumettre le formulaire de téléchargement.

4. Créez un nouveau répertoire dans le même répertoire que vos scripts et nommez- "uploadedimgs," comme c'est le cas de toutes les images téléchargées seront placés. Envoyez votre page Web, PHP script d'upload, les deux fichiers javascript (jQuery et chargement Plugin) et votre nouveau "uploadedimgs" répertoire pour votre serveur Web. Assurez-vous que tous les fichiers restent dans les mêmes positions relatives afin que vos références de code fonctionne correctement.

5. Accédez à votre page Web et de tester la fonctionnalité d'ajout. Vérifiez que les informations dans la section de la page iframe met à jour correctement sur la soumission du formulaire, comme il se doit la sortie l'un des messages indiquant si inclus ajout a réussi ou non. Vérifiez également que les images ont été téléchargées avec succès en faisant une connexion à votre serveur et de vérifier le contenu de la "uploadedimgs" répertoire.