11544 sujets

JavaScript, DOM et API Web HTML5

Effacer le contenu d'un champ FILE [RESOLU]

Bonjour à tous.

J'ai un formulaire d'envoi classique avec la possibilité d'ajouter des images.

J'ai un script JS (sur l'événement onchange) qui indique aux utilisateurs, une fois leur image insérée dans le champ file, que celle-ci est trop lourde si elle dépasse la limite autorisée de 1 méga.

Ce que je cherche à faire c'est de donner la possibilité aux utilisateurs de vider le champ File (si l'image est trop lourde) grâce à un bouton pour en choisir une plus légère.

J'ai essayé plusieurs techniques trouvées sur le web sans grand succès (replaceChild). Peut-être je m'y prends mal... Smiley confused

Quelqu'un à t-il une idée ?

Merci d'avance
Modifié par pareto (17 Oct 2014 - 11:41)
Bonjour,

Est il possible d'avoir ton code HTML et JS que tu as tenté de faire ?

Ensuite, si j'ai bien compris tu souhaites vider la valeur de ton input file ? 

//JQUERY
$('#input_file').val('');

//JS
document.getElementById("input_file").value = '';
Merci mini-truc je pense que tu m'as mis sur la bonne voie




function vide_input(id) 
{
    $('#'+id).html($('#'+id).html());
		document.getElementById("divimage0").style.display="none"; 
}




echo'
<div id="madiv'.$i.'">
<input type="file"  size="86" id="image'.$i.'"  name="image'.$i.'" value="" onchange="javascript:checkfilename'.$i.'();"  />
<input type="button" style="font-size:10px; height:20px; width:55px;" value="Effacer" onclick="vide_input(\'madiv'.$i.'\');" /></div>';

Modifié par pareto (25 Sep 2014 - 16:29)
Modérateur
pareto a écrit :
Merci mini-truc je pense que tu m'as mis sur la bonne voie




function vide_input(id) 
{
    $('#'+id).html($('#'+id).html());
		document.getElementById(&quot;divimage0&quot;).style.display=&quot;none&quot;; 
}




echo'
&lt;div id=&quot;madiv'.$i.'&quot;&gt;
&lt;input type=&quot;file&quot;  size=&quot;86&quot; id=&quot;image'.$i.'&quot;  name=&quot;image'.$i.'&quot; value=&quot;&quot; onchange=&quot;javascript:checkfilename'.$i.'();&quot;  /&gt;
&lt;input type=&quot;button&quot; style=&quot;font-size:10px; height:20px; width:55px;&quot; value=&quot;Effacer&quot; onclick=&quot;vide_input(\'madiv'.$i.'\');&quot; /&gt;&lt;/div&gt;';


Salut,

Hum.....

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
</head>
<body>
    <form action="#" method="post" id="formFile" enctype="multipart/form-data">
        <fieldset>
            <legend>Télécharger un ficheir</legend>
            <div class="input file"><label for="file">Choisir : </label><input type="file" name="file" id="file"></div>
            <div class="input submit"><input type="submit" name="soumettre" value="envoyer"></div>
            <div class="input reset"><input type="reset" name="effacer" value="effacer sans JS"></div>
            <!-- manière dégueu -->
            <div class="input button"><input type="button" id="effacer_degueu" name="effacer_degueu" value="effacer avec JS (dégueu comme technique....) "></div>
            <!-- fin de manière dégueu -->
        </fieldset>
    </form>
    <script type="text/javascript">
        window.onload = function(){
            document.getElementById('effacer_degueu').onclick = function(){
                document.getElementById('formFile').reset();
            }
        }
    </script>
</body>
</html>


Quand je parle de technique dégueu, j'entends par là qu'un simple reset ne justifie pas le JS. Voir le code. Lorsqu'il y a appel au JS, c'est souvent pour reset d'une manière plus spécifique (valeur par défaut des champs par exemple ). Et encore il me semble qu'un reset html revient au valeur par défaut lors du chargement de la page. Donc, le JS ne se justifie pas.

À noter qu'un reset de formulaire en jquery se passe ainsi :
$('#formFile')[0].reset()

et non pas comme celà :
$('#formFile').reset()

Modifié par niuxe (27 Sep 2014 - 12:02)
Sujet clos
Aller à