Forum d'entraide PHPFrance

Bonjour à tous, alors voilà j'ai un problème en Javascript concerçant un input file que je veux accéder via un bouton

Voici les codes

function GetFile() {
	elem = document.getElementById('hiddenfile');
	elem.click();
	document.getElementById('selectedfile').value = elem.value;

}
function notEmpty(id, message)
{
	elem = document.getElementById(id);
	
	if (elem.value.length == 0)
	{
		alert(message);
		elem.focus();
		return false;
	}
	
	return true;
}

<form method="POST">
<input type="file" id="hiddenfile" style="display:none" />
<input type="text" onclick="GetFile()" placeholder="Sélectionner un fichier..." id="selectedfile" />
<input type="button"  id="file" value="Naviguer" onclick="GetFile()" />
<div class="clear"></div>
<input type='text' placeholder="Description du fichier..." value="" />
<input type='submit' id="send" value="Envoyer" onclick="notEmpty('selectedfile', 'Veuillez sélectionner un fichier à héberger')" /><br />
</form>

De plus lorsque avec firefox, oui ça marche avec, la valeur du input type file ne se met pas directement dans le selectedfile!

Mais le plus important c'est que rien ne se passe lorsque je clique sur Naviguer

.click() est à la base une fonction de IE, qui a surement été ajoutée sur FF, mais pas sur chrome.
Pour ma part je te conseil de faire du Jquery pour ce cas la

Si c'est du genre

$('').click(function() { } ); 

j'ai déjà essayé !

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<input type="file" id="monInputFile" style="visibility:hidden"/>
<input type="button" style="border:1px solid #000;width:100px;height:30px;background-color:#CCC;" onclick="$('#monInputFile').click();"/>

T'as surement du essayé comme ça alors ?

Ou encore comme ça avec des functions :p ?

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
function loadfile()
{
  $('#monInputFile').click();
}
</script>
<input type="file" id="monInputFile" style="visibility:hidden"/>
<input type="button" id="monButton" style="border:1px solid #000;width:100px;height:30px;background-color:#CCC;" onclick="loadfile();"/>

J'aimerai que mon input soit en display: none; en visibility hidden, il garde la meme taille et déforme donc la page

Hum oui, je vois l'origine du problème j'avais pas fais attention, ben ça, faut y mettre un coup de css

ça veut dire que je fais height: 0; margin: 0; des trucs comme ça ?

style="visibility:hidden;width:0px"

A tout problème il y a des solutions

J'ai également ajouté un height: 0px; ^^
Mais merci, juste à cause d'un display: none, cela ne fonctionnait pas!

Sinon, j'ai un problème de valeur

voici le code que j'utilise

function GetFile() {
	elem = document.getElementById('hiddenfile');
	$('#hiddenfile').click();
	document.getElementById('selectedfile').value = elem.value;

}

Dans mon formulaire, j'ai un input type texte mais le problème c'est que la valeur du type input file ne se met pas directement !

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $('#monInputFile').bind('change',function(){
   $('#maText').val($('#monInputFile').val());
  });
  $('#monButton').bind('click',function(){
   $('#monInputFile').click();
  });
});
</script>
<input type="file" id="monInputFile" style="visibility:hidden;width:0px"/>
<input type="text" value="" id="maText" />
<input type="button" id="monButton" style="border:1px solid #000;width:100px;height:30px;background-color:#CCC;"/>

Le jquery pur, c'est quand même bien plus simpatosh .

J'ai un problème de nouveau, j'ai quelque chose qui s'affiche : C:/fakepath/fichier.txt

C'est quand tu as trop d'icone sur le desktop il le met dans le fakepath, c'est une sorte d'extention du bureau