Les partenaires publicitaires:

Comment télécharger des images en utilisant Ajax

Utilisation d'AJAX pour télécharger des images à un site Web rend le processus convivial, comme le téléchargement peut se produire sans le navigateur est d'avoir à chercher une nouvelle page. Cependant, AJAX seul ne peut pas télécharger des images, et de l'image grâce à télécharger le code côté serveur exige généralement une nouvelle page d'abord être récupérée. Pour contourner ces problèmes, vous pouvez utiliser les bibliothèques jQuery avec les iframes dans le code HTML de votre page pour télécharger l'image tout en restant sur la même page.

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.

Conseils & Avertissements

  • Vous pouvez masquer les iframes dans vos pages en mettant en visibilité "caché" dans votre code CSS.
  • Utilisation iframes peuvent être imprévisibles, alors assurez-vous de tester vos pages dans différents navigateurs Web.
» » » » Comment télécharger des images en utilisant Ajax