Nom image à inserer [Résolu]

Signaler
Messages postés
63
Date d'inscription
dimanche 6 janvier 2013
Statut
Membre
Dernière intervention
23 mars 2016
-
Messages postés
63
Date d'inscription
dimanche 6 janvier 2013
Statut
Membre
Dernière intervention
23 mars 2016
-
Bonjour,

Dans un formulaire qui a un champ qui permet d'uploader plusieurs fichiers, j'aimerais mettre un bouton "inserer" a coté de celui ci pour qu'il puisse selectionner le nom de l'image prête à être uploader, et que ce nom soit inserer dans la zone textarea. ou un glisser deposer.
Est ce possible? si oui comment faire? si non quel solution proposez vous?

J'ai déja mon champ upload et qui charge mes fichiers grace a mn bouton envoyer.
Quand je clique sur le bouton upload, ca me marque le chemin comme ceci C:\DocumentsandSettings\image1.jpg
et je recherche a faire un bouton inserer qui quand on cliquera dessus, prendre la valeur image1.jpg et ira l'inserer dans ma textarea avec les crochets <!-- / message -->
merci

Je suis debutante de chez debutante

<!-- / message -->

79 réponses

Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
36
ça devrait le faire...

j'en suis là. reste à tester coté php

<script type="text/javascript">
var num=0;
function ajout()
    {   var i=document.createElement("input");
        i.type="file";
        i.id="fichier_"+num;
        i.name="fichier[]";
        var d=document.createElement("div");
        d.appendChild(i);
        document.getElementById( 'divFichiers' ).appendChild(d);
 var b=document.createElement("input");
        b.type="button";
        b.value="inserer nom image";
    b.onclick=function() { inserer_nom(this); }
  b.width="120";
  d.appendChild(b);
 var c=document.createElement("input"); // ajout du bouton pour supprimer
  c.type="button";
  c.value="Supprimer"; //nom du bouton
  c.onclick=function() { //lors du clique, appel de la fonction qui suit
  this.parentNode.style.display="none"; //suppresion d'un champ input
  this.parentNode.getElementsByTagName("input")[0].name=""; }
  c.width="81"; //Taille du bouton
        d.appendChild(c);
        num++;
    }
function inserer_nom(num)
{  var text = num.parentNode.getElementsByTagName("input")[0].value;
   var fichier = text.substr(text.lastIndexOf('\\')+1);
   document.getElementById('textarea').value+= '\n';
}
</script>

[javascript:void(ajout()); Ajouter un champ]

<textarea id="textarea"></textarea>

<script type="text/javascript"><!-- à la place du 1er bouton...-->
    ajout();
</script>

    ET supprimer le dans le textarea lorsqu'on supprime un input file !
    (  regardez .replace pourquoi pas... )

<hr />


Cordialement                Bul     [mon Site]     [M'écrire]



<hr />
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
36
Bonjour,

    le contenu du champ file c'est : document.getElementById("id du file").value
    le contenu d'un textarea :
document.getElementById("id du textarea").value
    un bouton,

    il manque quelquechose ?

    ( glisser/déposer... moins simple ! )



<hr />



Cordialement                Bul     [mon Site]     [M'écrire]



<hr />
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
36
on pourrait jouer avec le onchange du input file... etc...
<hr />


Cordialement                Bul     [mon Site]     [M'écrire]



<hr />
Messages postés
469
Date d'inscription
mercredi 9 janvier 2002
Statut
Membre
Dernière intervention
20 février 2017
6
Salut, je sais pas si j'ai tout tout bien compris mais j'en ai retirer ceci, lors de la selection d'une image, il faudrait que seul le nom ( ie sans le chemin ) soit afficher entre des balises "
                        alert ( "" );
                }
        </script>
    </head>
   
   
   
   
</html>

Comme je ne sais pas trop.....

[o-_-o]
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
36
ben... c'est bon... non ?

<html>
    <head>
        <title>
        </title>
        <script type="text/javascript">
               function getImgName ()
               {  var contentImg = document.getElementById ("val").value;
                  document.getElementById("monTextArea").value=
      "";
               }
        </script>
    </head>
   
       
       
        <textarea id="monTextArea"></textarea>
   
</html>

<hr />


Cordialement                Bul     [mon Site]     [M'écrire]



<hr />
Messages postés
63
Date d'inscription
dimanche 6 janvier 2013
Statut
Membre
Dernière intervention
23 mars 2016

Oui c'est bien cela mais sachant que j'ai utilisé :
http://www.editeurjavascript.com/scripts/scripts_formulaires_3_653.php
un créateur de plusieurs champs d'upload, cela me beugue tout et me sors que le nom de la premiere image :

function create_champ(i) {



var i2 = i + 1;



document.getElementById('leschamps_'+i).innerHTML = '
';
document.getElementById('leschamps_'+i).innerHTML += (i <= 10) ? '[javascript:create_champ('+i2+') Ajouter un champ]' : '';
}

function inserer_nom() {
var text = document.getElementById('fichier_1').value;  
var fichier = text.substr(text.lastIndexOf('\\')+1); //LastIndexOf recuperes le dernier ""
document.getElementById('textarea').value += fichier+'\n';
}

           

            [javascript:create_champ(2) Ajouter un champ]
Messages postés
469
Date d'inscription
mercredi 9 janvier 2002
Statut
Membre
Dernière intervention
20 février 2017
6
Ce qui paraît très logique, et non buggé ;o)

En fait dans la méthode inserer_nom , il faudrait lui passer en paramètre l'identifiant du champs :

ce qui arriverait à un truc ( attention pas testé ) du genre:

unction create_champ(i) {

var i2 = i + 1;

document.getElementById('leschamps_'+i).innerHTML = '
';
document.getElementById('leschamps_'+i).innerHTML += (i <= 10) ? '[create_champ('+i2+') Ajouter un champ]' : '';
}

function inserer_nom(_id) {
var text = document.getElementById(_id).value; 
var fichier = text.substr(text.lastIndexOf('\\')+1); //LastIndexOf recuperes le dernier ""
document.getElementById('textarea').value += fichier+'\n';
}
[o-_-o]
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
36
pas très loin....

<script type="text/javascript">
function create_champ(i) {
var i2 = i + 1;
document.getElementById('leschamps_'+i).innerHTML =
    ''+
    '
';
document.getElementById('leschamps_'+i).innerHTML +=
    (i <= 10) ? '[create_champ('+i2+') Ajouter un champ]' : '';
}
function inserer_nom(num) {
var text = document.getElementById('fichier_'+num).value; 
var fichier = text.substr(text.lastIndexOf('\\')+1); //LastIndexOf recuperes le dernier ""
document.getElementById('textarea').value+= fichier+'\n';
}
</script>

   
           

[javascript:void(create_champ(2)); Ajouter un champ]

<textarea id="textarea"></textarea>

<hr />


Cordialement                Bul     [mon Site]     [M'écrire]



<hr />
Messages postés
63
Date d'inscription
dimanche 6 janvier 2013
Statut
Membre
Dernière intervention
23 mars 2016

Ne marche pas...
Que signifie javascript:void ??
Messages postés
63
Date d'inscription
dimanche 6 janvier 2013
Statut
Membre
Dernière intervention
23 mars 2016

Autre souci aussi, je souhaite faire le même bouton à côté d'un menu déroulant qui fait le récapitulatif d'image présente dans un dossier. mais comment lui dire quand je clique sur inserer, d'inscrire le nom présent dans la liste déroulante ???


Ma liste déroulante :


 <select name= "listimages">
              <option value="">Images déja présentes</option>
     <?php
 //ensuite on ferme la balise pour afficher du HTML
 // utilisation de la fonction avec des fichiers JPG
   $getFile = browse("images/".$id."/", "jpg" or "jpeg" or "png" or "gif");//on demande la lecture du répertoire images avec pour fichiers
  foreach ($getFile as $myFile)//foreach : moyen simple de passer en revue un tableau chaque ligne
  {echo '<option value='.$myFile.'>'.$myFile."</option>";} //on affiche la  ligne dans la liste déroulante 
 ?>
   </select>
    
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
36
dans href, si javascript, il faut ajouter return false ou faire
void(fonction) pour éviter que le formulaire ne soit sooumis pas exemple.
    void, ça permet de frimer un peu par rapport à return false.

>>

Ne marche pas...
    si.  



<hr />



Cordialement                Bul     [mon Site]     [M'écrire]



<hr />
Messages postés
63
Date d'inscription
dimanche 6 janvier 2013
Statut
Membre
Dernière intervention
23 mars 2016

J'ai pas trop compris la !
j'ai tout mis pareil et cela ne fonctionne plus ! il marche pour le premier mais pas les autres champs !
et que dois je rajouter si je veux avec les crochets[img], merci
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
36
j'ai simplifié un peu...

<script type="text/javascript">
var i=0;
function create_champ()
{    i++;
    document.getElementById('leschamps').innerHTML +=
        ''+
        '
';
}
function inserer_nom(num)
{    var text = document.getElementById('fichier_'+num).value;
    var fichier = text.substr(text.lastIndexOf('\\')+1); //LastIndexOf recuperes le dernier ""
    document.getElementById('textarea').value+= '\n';
}
</script>

[javascript:void(create_champ()); Ajouter un champ]

<textarea id="textarea"></textarea>

<script type="text/javascript">
    create_champ();
</script>

avec un souci ( déjà rencontré ! ) le contenu des file s'effacent.
je ne me souvient plus comment résoudre.... ça va revenir ? peut-être !

<hr />


Cordialement                Bul     [mon Site]     [M'écrire]



<hr />
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
36
>>


avec un souci ( déjà rencontré ! ) le contenu des file s'effacent.

    j'ai retrouvé, et .... je n'avais pas résolu à l'époque.
       tout ce que j'avais réussi à faire, c'est mettre des champs file cachés,
            avec un name="fichier[]" ( pour le php ! )  qu'on montre au fûr et
            à mesure des besoins
           ( ce qui suppose un nombre maxi )





<hr />



Cordialement                Bul     [mon Site]     [M'écrire]



<hr />
Messages postés
63
Date d'inscription
dimanche 6 janvier 2013
Statut
Membre
Dernière intervention
23 mars 2016

Suis-je obligé de faire comme cela?
Pourrais tu me donner la synthaxe  complete ?? merci
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
36
>>

Suis-je obligé de faire comme cela?
                je ne sais pas... je n'ai pas résolu... ce qui ne prouve rien.





<script    type="text/javascript">
    function ajout(num)
    {    document.getElementById("fic"+(num+1)).style.display="inline";
        document.getElementById("btn"+(num+1)).style.display="inline";
    }
</script>
<form       name="frm"
                action="page.php"
                enctype="multipart/form-data"
                method="POST" >
   

<script    type="text/javascript">
    var tmp="";
    for ( var n=0;n<100;n++ ) // 100 fichiers, c'est pas mal !!!!
    {    tmp+=    "
" +
                "" +
                "";
    }
    document.frm.innerHTML+=tmp;
    ajout(-1);
</script>
</form>

il faudrait enlever le dernier bouton "encore" ou récupérer l'erreur
    si on tente d'afficher  fic100 et btn100

coté php ( à tester, à finir... )

<?php
foreach ($_FILES["fic"]["error"] as $key => $error)
{    if ($error == UPLOAD_ERR_OK)
     {    $tmp_name = $_FILES["fic"]["tmp_name"][$key];
          $name = $_FILES["fic"]["name"][$key];
          move_uploaded_file($tmp_name, "data/$name");
     }
}
?>

tu sauras ajouter le textarea ( si c'est utile !!! )

<hr />


Cordialement                Bul     [mon Site]     [M'écrire]



<hr />
Messages postés
63
Date d'inscription
dimanche 6 janvier 2013
Statut
Membre
Dernière intervention
23 mars 2016

Ouahh c'est du serieux! je vais boser dessus, je te remercie. Et juste pr l'histoire de mon menu déroulant, c'est possible de recuperer le nom de l'image?

<select name= "listimages">
               <option value ="">Images déja présentes</option>
     <?php
 //ensuite on ferme la balise pour afficher du HTML
 // utilisation de la fonction avec des fichiers JPG
  $getFile = browse("images/".$id."/", "jpg" or "jpeg" or "png" or "gif");//on demande la lecture du répertoire images avec pour fichiers
  foreach ($getFile as $myFile)//foreach : moyen simple de passer en revue un tableau chaque ligne
  {echo '<option value='.$myFile.'>'.$myFile."</option>";} //on affiche la  ligne dans la liste déroulante 
 ?>
   </select>
    
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
36
tu veux ajouter le nom de l'image au select ?
        var sel= document. name du formulaire .listimages; ou autres !
        sel.length++;
        sel[sel.length-1].text ="le nom de l'image";         par exemple
<hr />


Cordialement                Bul     [mon Site]     [M'écrire]



<hr />
Messages postés
63
Date d'inscription
dimanche 6 janvier 2013
Statut
Membre
Dernière intervention
23 mars 2016

Non non je veux le mettre principe que l'autre bouton!
un bouton "inserer" le nom de l'image dans la textarea
j'ai déja mes noms présents dans ma liste déroulante, je veux juste les inserer
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
36
tu veux ajouter les options dans le textarea ?

    en javascript :
        for ( var n=0;n<sel.length;n++)
        {   et on gère ici sel.options[n].text;   }   // à ajouter au .value, comme dans l'autre cas.

    sinon, tu peux le faire depuis le php...
    <textarea ...>    
       <?php ... echo ''."\r\n";... ?>


    </textarea>

ou alors je n'ai toujours pas compris...



<hr />



Cordialement        Bul     [mon Site]     [M'écrire]



<hr />