Partage
  • Partager sur Facebook
  • Partager sur Twitter

Récupérer path contenu dans un input.type = "file"

Sujet résolu
    22 août 2011 à 18:21:29

    Bonjour,

    Dans mon script, j'aurais besoins de récupérer le path contenu dans le input.type = "file" (celui utilisé pour l'upload de données):

    function	applyEvent()
    {
    	var text = document.getElementById("test");
    	alert(text.innerHTML);
    }
    
    
    function upload_image(id)
    {
    	if (!id)
    		id = 'uploadfilebox';
    	var el = $(id);
    	var form = document.createElement("form");
    	form.name = "myform";
    	form.method = "post";
    	form.action = "javascript:alert(this.firstChild.innerHTML)";
    	
    	var input = document.createElement("input");
    	input.name = "image";
    	input.type = "file";
    	input.id = "test";
    	
    	var submit = document.createElement("input");
    	submit.type = "submit"
    	submit.value = "Envoyer";
    	
    	
    	form.appendChild(input);
    	form.appendChild(submit);
    	
    	form.action = "javascript:applyEvent()";
    	
    	el.appendChild(form);
    }
    


    Quand l'utilisateur valide le formulaire, le alert dans applyEvent() n'affiche rien au lieu du path.

    Merci d'avance
    • Partager sur Facebook
    • Partager sur Twitter
      22 août 2011 à 18:27:02

      c'est complètement impossible pour des raisons de sécurités!

      Par contre tu peux "tricher" en te servant d'un formulaire d'upload en flash...
      • Partager sur Facebook
      • Partager sur Twitter
        22 août 2011 à 18:30:04

        Il faut que tu utilise file API d'HTML5.
        • Partager sur Facebook
        • Partager sur Twitter
        Mon Twitter : @Amatewasu
          22 août 2011 à 18:35:29

          Citation : Amatewasu

          Il faut que tu utilise file API d'HTML5.


          c'est aussi une solution mais c'est pour le moment très peu compatible (je dirais moins de 1% de la population)
          • Partager sur Facebook
          • Partager sur Twitter
            22 août 2011 à 18:37:36

            Supporté par Firefox, Chrome et Opera uniquement ^^
            • Partager sur Facebook
            • Partager sur Twitter
            Mon Twitter : @Amatewasu
              22 août 2011 à 18:39:14

              ok merci.

              Enfaite ce que je souhaite faire, c'est une amélioration du bugtracker Flyspray. Je souhaite rajouter une option pour uploader l'image et ensuite garder le path de l'image sur le serveur pour ensuite la mettre dans le textarea du nouveau commentaire, faire un deux en un:

              le choix des options:

              <a tabindex="-1" href="javascript:void(0);" onclick="surroundText(\'<code>\', \'</code>\', \''.$textareaId.'\'); return false;">
              			<img src="'.$baseurl.'plugins/dokuwiki/img/source.png" align="bottom" alt="Insert Code" title="Insert Code" border="0" /></a>
              			<a tabindex="-1" href="javascript:void(0);" onclick="surroundText(\'<code php>\', \'
              
              \', \''.$textareaId.'\'); return false;">
              <img src="'.$baseurl.'plugins/dokuwiki/img/source_php.png" align="bottom" alt="Insert Code" title="Insert PHP Code" border="0" /></a>

              <img src="'.$baseurl.'plugins/dokuwiki/img/divider.gif" alt="|" style="margin: 0 3px 0 3px;" />

              <a tabindex="-1" href="javascript:void(0);" onclick="upload_image()"; return false;">
              <img src="'.$baseurl.'plugins/dokuwiki/img/upload_image.png" align="bottom" alt="Upload Image" title="Upload Image" border="0" /></a></code>


              Image utilisateur

              Niveau possibilité je suis assez limité vu que je veu éviter de modifier énormément le code sources.

              Je ne peu pas utiliser leurs système d'upload par impossible de trouver où l'image est hébergé.

              Merci d'avance
              • Partager sur Facebook
              • Partager sur Twitter
                22 août 2011 à 18:42:48

                une solution :

                -tu upload l'image
                -le serveur enregistre l'image et renvoie le chemin de celle-ci a ton script js
                -le script js ajoute ce chemin a ton textarea

                il me semble que se soit le plus simple à mettre en place
                • Partager sur Facebook
                • Partager sur Twitter
                  22 août 2011 à 18:46:22

                  c'est exactement ce que je pensais faire, mais comment le serveur va renvoyé l'emplacement de l'image au script js?

                  En ajax? j'ai pas trouvé comment faire.

                  Si tu a des pistes, je les veu bien ^^
                  • Partager sur Facebook
                  • Partager sur Twitter
                    22 août 2011 à 18:48:56

                    ton upload fonctionne comment? depuis une nouvelle fenêtre ou en rechargeant la page?
                    • Partager sur Facebook
                    • Partager sur Twitter
                      22 août 2011 à 18:52:15

                      pour le moment je n'upload rien, j'ai juste fais la base, je pensais récupérer le path pour ensuite l'envoyé en ajax à un script php qui sauvegardera l'image sur le serveur et qui me renverra ensuite l'url de l'image, pour pouvoir ensuite modifier dynamiquement le textarea.

                      Je ne peu donc pas utiliser un rechargement de la page car l'utilisateur devrait pouvoir continuer d'écrire son message.

                      Edit: l'upload dans une popup serait top car je voudrais aussi que l'utilisateur puisse entouré, faire des flèches sur l'image via canvas.
                      • Partager sur Facebook
                      • Partager sur Twitter
                        22 août 2011 à 18:57:00

                        le mieux c'est de taper dans une nouvelle fenêtre ou une iframe qui ne contiendrait que le formulaire d'upload, une fois que ton image est envoyée par cette méthode, le serveur renvoie un script JS du type :

                        window.parent.addPathImg("le path de l'image enregistrée sur ton serveur");
                        


                        sachant que addPathImg() serait une fonction récupérant le chemin de ton image et étant situé dans la fenêtre principale!
                        • Partager sur Facebook
                        • Partager sur Twitter
                          22 août 2011 à 19:00:51

                          je ne comprend pas parent.addPathImg et comment elle pourrai récupérer le path, je viens d'éditer mon message précédent pour dire que sa m'arrangerais même d'ouvrir une nouvelle fenêtre ^^
                          • Partager sur Facebook
                          • Partager sur Twitter
                            22 août 2011 à 19:04:02

                            Si tu utilises PHP, tu peux avoir le nom de ton fichier uploadé grâce à $_FILES['monfichier']['name']
                            • Partager sur Facebook
                            • Partager sur Twitter
                            Mon Twitter : @Amatewasu
                              22 août 2011 à 19:12:45

                              en fait window.parent pointe vers le fenêtre parente (la fenêtre qui a ouvert le popUp) or cette dernière (la fenêtre parente) doit contenir une fonction comme par exemple addPathImg(path) qui est appelée depuis le popUp.

                              A partir de la, il suffit que la popUp contienne le chemin de l'image grâce au php mais attention, c'est TOI qui choisit le chemin du fichier et non pas $_FILES['monfichier']['name'] qui ne donne que le nom de l'image à l'origine!
                              • Partager sur Facebook
                              • Partager sur Twitter

                              Récupérer path contenu dans un input.type = "file"

                              × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
                              × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
                              • Editeur
                              • Markdown