> Tous les forums > Forum des Webmasters
 script d'insertion d'imageSujet résolu
Ajouter un message à la discussion
Page : [1] 
Page 1 sur 1
ogd
  Posté le 04/06/2010 @ 13:07 
Aller en bas de la page 
Astucien

Hello!

Dans un formulaire de mise à jour de page, je dois pouvoir aller chercher l'url d'une des images qui sont un un dossier dédié sur le serveur.

Je cherche donc un script qui:

-affiche un bouton qui permet d'explorer un repertoire défini du serveur

-on peut donc visualiser les images de ce répertoire pour choisir l'image voulue

-quand on clique sur l'image voulue, ça ferme l'explorateur et intègre l'url de l'image dans mon input

De cette manière quand je valide mon formulaire, l'url est ajoutée dans la base de données et quand j'appelle la ligne voulue de la bdd, mon image s'affiche sur la page du site.

J'ai pas mal cherché sur le net, mais je tombe essentiellement sur des scripts d'upload de fichier, ce qui n'est pas ce que je cherche.

Si vous savez ou je peux trouver ça (le plus facile) ou comment le coder, ce serait sympa.

Bonne fin de semaine

Publicité
Cedders
 Posté le 04/06/2010 à 14:59 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Petit astucien

Bonjour Bonjour :D

Je sais pas si tu vas trouver un script qui ne fais que ça. Ces fonctions sont disponibles dans des éditeurs WYSIWYG généralement (CKEditor, TinyMCE, ...).

Pour ma part je travail aussi sur un petit projet et je découvre la récup de fichier sur le serveur donc je suis pas encore au point mais la fonction php scandir() devrait t'aider. Elle retourne la liste des fichiers/dossiers présent dans répertoire donné sous forme d'un array. Après tu dois l'utiliser de manière récursive pour parcourir les sous-dossiers.

Une fois que tu as la liste de tes images, à toi de voir ce que tu veux faire ... une liste et quand l'utilisateur sélectionne l'image un aperçu s'affiche (un peu comme le choix des avatars sur un forum) ou alors, dans une div/fenêtre, tu affiches x images du serveur comme l'insertion de smiley sous un forum

ogd
 Posté le 08/06/2010 à 10:15 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Astucien

voilà, donc en fait je scan mon dossier à images et j'affiche son contenu.

En fait, j'ai repiqué un bout de script que j'ai remis à ma sauce... :

//nom du répertoire contenant les images à afficher
$nom_repertoire = 'monchemin';

//on ouvre le repertoire
$pointeur = opendir($nom_repertoire);
$i = 0;

//on les stocke les noms de fichiers images dans un tableau
while ($fichier = readdir($pointeur))
{
if (substr($fichier, -3) == "gif" || substr($fichier, -3) == "jpg" || substr($fichier, -3) == "png"
|| substr($fichier, -4) == "jpeg" || substr($fichier, -3) == "PNG" || substr($fichier, -3) == "GIF"
|| substr($fichier, -3) == "JPG")
{
$tab_image[$i] = $fichier;
$i++;
}
}


//on ferme le répertoire
closedir($pointeur);

//on trie le tableau par ordre alphabétique
array_multisort($tab_image, SORT_ASC);

//affichage des images (en 60 * 60 ici)
for ($j=0;$j<=$i-1;$j++)
{
$image = '<img src="'.$nom_repertoire.'/'.$tab_image[$j].'" style="border: 1px solid #FFFFFF" hspace="3" vspace="3" width="60" height="60">';

echo $image ;

}

me reste now à les linker pour que quand on clique sur une image, son nomdefichier.sonextension soit envoyé dans mon input

Cedders
 Posté le 08/06/2010 à 13:24 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Petit astucien

Oui ça me semble good. Par contre tu n'as pas besoin d'avoir un compteur.

Tu peux directement faire : $tab_image[] = $fichier

ogd
 Posté le 08/06/2010 à 15:51 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Astucien

Merci, je vais modifier ça.

2 questions:

-concernant l'affichage des images : comment est ce que je peux les trier en ordre décroissant de création sur le serveur?

-pour passer le nom du fichier en varible et l'envoyer dans le input text lorsqu'on clique sur une image, je peux faire qqchose comme ça:

<a href="methode post pour envoyer $fichier"> <img src="$image"></a>

ogd
 Posté le 09/06/2010 à 07:48 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Astucien

Bon, là, je bloque complet...

Je ne trouve rien (mais je cherche surement mal) sur google pour remplir mon input en cliquant sur l'image

Tiens par exemple, je remplis ce post, à gauche, j'ia les smileys, si je clique sur un smiley, son code s'affiche dans le textarea

donc, je dois bien pouvoir récupérer le nom de mon image image.jpg en cliquant dessus et envoyer cette valeur dans mon input,non?

Cedders
 Posté le 10/06/2010 à 09:40 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Petit astucien

EDIT :

Alors pour trier tes fichiers par date voici un petit tuto tout simple : http://php.developpez.com/faq/?page=fichiers_lire#fichiers_tri_par_date

Cela ne change pas grand chose à ton code, tu vas juste rajouter dans ton tableau la date de création avec la fonction filemtime(file) puis appliquer un tri.

Pour la récuperation de l'image dans ton champ voici un exemple avec des bouts de code donc pas fonctionnel

// Tu auras donc un champ input caché nommé iImage

<input type="hidden" id="iImage" />

// Pour chaque image tu va définir une fonction javascript qui va remplir ton champ caché avec le nom de l'image

// Tu y passeras l'id de ton champ caché et le nom de l'image

<img src="image1.jpg" onClick="setImage('iImage', 'image1.jpg');" />

// Enfin, la fonction javascript que tu mettras dans l'entête ou fichier externe

<script language="javascript" type="text/javascript">
function setImage(input, file)
{
document.getElementById(input).value = file;
}
</script>



Modifié par Cedders le 10/06/2010 10:03
ogd
 Posté le 10/06/2010 à 16:15 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Astucien

Merci,je regarderai demain pour l'ordre via la date.

Concernant le clic qui envoie le nom de fichier dans input, je n'y arrive pas.

J'ai bien placé le js dans head

j'ai mis mon input en text au lieu de hidden pour vérifier qu'il y insere le nom du fichier

puis j'ai fais ça :

<td style="width: 55%;"><font color="#FFFFFF">Choisis un visuel :</font></br>
<?php

//nom du répertoire contenant les images à afficher
$nom_repertoire = '../../images/djeux';

//on ouvre le repertoire
$pointeur = opendir($nom_repertoire);
$i = 0;

//on les stocke les noms de fichiers images dans un tableau
while ($fichier = readdir($pointeur))
{
if (substr($fichier, -3) == "gif" || substr($fichier, -3) == "jpg" || substr($fichier, -3) == "png"
|| substr($fichier, -4) == "jpeg" || substr($fichier, -3) == "PNG" || substr($fichier, -3) == "GIF"
|| substr($fichier, -3) == "JPG")
{
$tab_image[$i] = $fichier;
$i++;
}
}


//on ferme le répertoire
closedir($pointeur);

//on trie le tableau par ordre alphabétique
array_multisort($tab_image, SORT_ASC);

//affichage des images (en 60 * 60 ici)
for ($j=0;$j<=$i-1;$j++)
{
$image = '<img src="'.$nom_repertoire.'/'.$tab_image[$j].'" alt="'.$tab_image[$j].'" style="border: 1px solid #FFFFFF" hspace="3" vspace="3" width="60" height="60">';
?>

<img src="<? echo $nom_repertoire ; ?>/<? echo $tab_image[$i] ; ?>" onClick="setImage('iImage', '<? echo $tab_image[$i] ; ?>');" />

<?

}

?>
</td>
</tr>

mais il aime pas:

les images ne s'affichent même plus et au clic, rien ne se passe.

Cedders
 Posté le 10/06/2010 à 21:51 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Petit astucien

Bonsoir,

Là je bug sur ton code ...

//affichage des images (en 60 * 60 ici)
for ($j=0;$j<=$i-1;$j++)
{
$image = '<img src="'.$nom_repertoire.'/'.$tab_image[$j].'" alt="'.$tab_image[$j].'" style="border: 1px solid #FFFFFF" hspace="3" vspace="3" width="60" height="60">';
?>

<img src="<? echo $nom_repertoire ; ?>/<? echo $tab_image[$i] ; ?>" onClick="setImage('iImage', '<? echo $tab_image[$i] ; ?>');" />

<?

}

Dans ta boucle tu parcours ton tableau qui contient des images, à chaque tour tu défini la variable $image (contenant le code pour l'affichage de d'une image). Tu n'utilises pas cette variable ensuite ? tu devrais juste faire un echo $image ... par contre, tu affiches du html en dur correspondant à mon example.

Tu as contrôler le code source une fois la page affichée dans le navigateur pour voir s'il n'y avais pas une erreur de syntaxe ? Sinon le paramètre 'iImage' correspond à l'id de l'input donc peut être que tu as oublier de spécifier : id="iImage' dans la balise input qui contient le chemin de ton image.

A mon avis le problème viens de là ... n'hésite pas à utiliser la console JS de base de firefox si c'est ton navigateur (ctrl+shift+j).

ogd
 Posté le 11/06/2010 à 07:37 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Astucien

Hello!

Alors, j'y t'ixplique:

Si je n'utilise pas ma variable dans ce cas, ci, c'est parce que quand j'y ajoute le onclick, soit c'est moi, soit c'est le serveur qui se perd dans tous les " & ' de la variable.

Sinon, avant que tu me donne ton code, j'utilisais echo $image et les iumages s'affichent bien, mais sans pouvoir les linker vers le input

j'ai aussi essayé qqchose comme ça :

{
$image = '<img src="'.$nom_repertoire.'/'.$tab_image[$j].'" alt="'.$tab_image[$j].'" style="border: 1px solid #FFFFFF" hspace="3" vspace="3" width="60" height="60">';
?>
<a onClick="setImage('iImage', '<? echo $tab_image[$i] ; ?> ');" >
<? echo $image ; ?>
</a>

<?

}

?>
</td>
</tr>

Là, effectivement, mes images s'affichent bien, mais aucune action possible et avec href="#", rien de mieux...

voilà les lignes correspondant à mon input :

<td style="vertical-align: top; text-align: left; width: 40%;">
<p><b><font color="#FFFFFF">Image</font><br></b></p>
<b><input type="text" name="img" maxlength="50" size="60"></b>
</br><input type="text" id="iImage" /></td>
<td style="width: 5%;"></td>
<td style="width: 55%;"><font color="#FFFFFF">Choisis un visuel :</font></br>

j'ai gardé mon input de départ au cas où...

J'ai donc bien mon id repris dans le input

voilà ce que donne mon code source:

<a href="#" onClick="setImage('iImage', ' ');" >
<img src="../../images/djeux/jeurenanluce.jpg" alt="jeurenanluce.jpg" style="border: 1px solid #FFFFFF" hspace="3" vspace="3" width="60" height="60"></a>
<a href="#" onClick="setImage('iImage', ' ');" > [etc...]

donc il n'rrive pas à lire la variable.

A noter que si je remplace l'appel à la variable <? echo $tab_image[$i] ; ?> par un texte ou un nombre fixe (en dur) le clique sur l'image fonctionne nickel et renvoie bien ce que j'ai tapé dans e code vers mon input...

Donc, à priori, c'est la lecture ou l'interprétation de la variable qui coince...

Cedders
 Posté le 11/06/2010 à 08:37 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Petit astucien

Bonjour,

L'action onClick peux être affectée à la balise <img ... /> si jamais à moins que ce soit volontaire ;)

Sinon pour l'affichage de l'image tu utilises $tab_image[$j] et pour l'évènement onClick $tab_image[$i]. En toute logique la valeur devrait être le chemin relatif ou absolu de ton image donc : "'.$nom_repertoire.'/'.$tab_image[$j].'"

ogd
 Posté le 11/06/2010 à 09:00 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Astucien

Cedders a écrit :

Bonjour,

L'action onClick peux être affectée à la balise si jamais à moins que ce soit volontaire ;)

Sinon pour l'affichage de l'image tu utilises $tab_image[$j] et pour l'évènement onClick $tab_image[$i]. En toute logique la valeur devrait être le chemin relatif ou absolu de ton image donc : "'.$nom_repertoire.'/'.$tab_image[$j].'"

Alleluia !!!!

Ben oui, c'était pourtant évident, ça fait au moins une semaine que je te dis que c'est là qu'est le problème

Merci Cedders pour ton aide et ta patience.

Je vais regarder l'ordre d'affichage en début de semaine et je clos le sujet ensuite...

Très bon week end à toi et à toutes et tous

Cedders
 Posté le 11/06/2010 à 09:49 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Petit astucien

Haaa ben tant mieux alors !

Bon weekend à toi aussi :-)

Publicité
Page : [1] 
Page 1 sur 1

Vous devez être connecté pour participer à la discussion.
Cliquez ici pour vous identifier.

Vous n'avez pas de compte ? Créez-en un gratuitement !
Recevoir PC Astuces par e-mail


La Lettre quotidienne +226 000 inscrits
Avec l'actu, des logiciels, des applis, des astuces, des bons plans, ...

Les bonnes affaires
Une fois par semaine, un récap des meilleurs offres.

Les fonds d'écran
De jolies photos pour personnaliser votre bureau. Une fois par semaine.

Les nouveaux Bons Plans
Des notifications pour ne pas rater les bons plans publiés sur le site.

Les bons plans du moment PC Astuces

Tous les Bons Plans
Hub USB C 5 en 1 UGREEN (HDMI 4K, 1xUSB 3.0, 2xUSB 2.0, 1xUSB C PD 100W) à 14,99 €
14,99 € 25,99 € -42%
@Amazon
Ecran PC 27 pouces KTC H27V13 (VA, Full HD, 100 Hz) à 99,99 €
99,99 € 149 € -33%
@Geekbuying
NAS Synology DS423+ (4 baies) à 474,95 €
474,95 € 559 € -15%
@Amazon
Ecran PC 27 pouces Lenovo Legion Y27-30 (FHD, IPS, 180 Hz, HP, pied réglable) à 157,60 €
157,60 € 219,99 € -28%
@Amazon
Vidéo projecteur WANBO X2 Pro (HD 720p, 450 lumens ANSI, WiFi 6, Android, entrepôt Europe) à 69 €
69 € 200 € -66%
@Geekbuying
Batterie externe DaranEner NEO1500Pro 1382Wh, 1800W, LifePOE4 à 639 €
639 € 750 € -15%
@Geekbuying

Sujets relatifs
Insertion image dans page Web directement sans URL ?
insertion d'une image dans une balise div
Insertion d'image directement sur un site
insertion d'un script
Insertion texte dans une image a un endroit précis
Script image??
Cherche Script php de galerie d'image simple...
insertion / Image / Son ?????
Script image
Ajouter un script sur une image
Plus de sujets relatifs à script d''insertion d''image
 > Tous les forums > Forum Forum des Webmasters