Effacer ou rejeter un uploaded file sur formulaire

Résolu
lerod83 Messages postés 64 Date d'inscription   Statut Membre Dernière intervention   -  
lerod83 Messages postés 64 Date d'inscription   Statut Membre Dernière intervention   -
Bonjour,

Je suis en train de réaliser un formulaire avec lequel un utilisateur peut insérer une photo. Tout se passe bien mais je veux ajouter un bouton permettant d’effacer (ou de rejeter) le fichier uploadé si l’utilisateur change d’idée au cours de sa rédaction, je précise que c’est seulement pour le type input file mais n’est pas pour le formulaire tout entier.

Mes scripts permettent à l’utilisateur de voir l’image uploadé sans rafraîchir la page ni envoyer le formulaire. Et lors du clic du bouton effacer, que l’image disparaisse et le champs revienne à son apparence d’origine c'est à dire que l'icone "add_photo.gif" doit apparaitre.

J’ai concocté depuis quelques temps, mais je n’ai pas réussi à 100%. J’ai trouvé le script qui rejette le champ file et c’est bien effacé (c’est prouvé quand on survole le souri) mais l’image uploadé reste toujours visible sur le champs au lieu de add_photo.gif.

Je poste ci bas mes script pour vous expliquer la situation et je sollicite votre soutien.

Cordialement.

HTML : 
<!DOCTYPE html>
<html>

<head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <script src="[https://code.jquery.com/jquery-2.2.3.min.js]"></script>
 <title>formulaire</title>
</head>

<body>

<form method='post' action=''>
 <div class="fileUpload">
  <span class="custom-span">
   <img id="uploadPreview1" src="images/img_bouton/add_photo.gif"> 
  </span>
  <p class="custom-para">Ajouter une photo</p>
  <input id="uploadImage1" type="file" class="upload" name="image1" onchange="PreviewImage(1);"/>
  
  
 </div>
 <a href="" id="resetLink">Effacer</a>
 <br/><br/>
 
 <input type="submit" value='Envoyer'/>

</form>

 </body>
</html>


CSS: 
#uploadPreview1{
    height: 95px;
    margin-top: 3px;
}
    
     
.fileUpload {
        position: relative;
        overflow: hidden;
        margin: 10px;
        height: 100px;
        width: 135px;
        text-align: center;
        border-radius: 6px;
}

#button{
 z-index:99999;
}
.fileUpload input.upload {
 position: absolute;
 top: 0;
 right: 0;
 margin: 0px 0px 0px 0px;
 padding: 0;
 font-size: 20px;
 cursor: pointer;
 opacity: 0;
 filter: alpha(opacity=0);
 height: 100%;
 text-align: center;
}
.custom-span{ font-family: Arial; font-weight: bold;font-size: 100px; color: #FE57A1}
.custom-para{font-family: arial;font-weight: bold;font-size: 24px; color:#585858;}


JAVASCRIPT: 

 //upload file
 function PreviewImage(no) {
  var oFReader = new FileReader();
  oFReader.readAsDataURL(document.getElementById("uploadImage"+no).files[0]);
  oFReader.onload = function (oFREvent) {
  document.getElementById("uploadPreview"+no).src = oFREvent.target.result;
  };
 }
 
 
 
 //rejet file
  function reset_form_element (e) {
   e.wrap('<form>').parent('form').trigger('reset');
   e.unwrap();
  }

  $('#resetLink').on ('click', function (e) {
   reset_form_element( $('#uploadImage1') );
   e.preventDefault();
  });


Cordialement
Lerod




EDIT : Ajout des balises de code (la coloration syntaxique).
Explications disponibles ici :ICI

Merci d'y penser dans tes prochains messages.
A voir également:

1 réponse

Réponse 1 / 1
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
Bonjour,

Pour retirer une image ... il suffit de vider la balise SRC non ?

PS: Plutôt que de "vider" ton message précédent et d'en ouvrir un nouveau... tu aurais du poursuivre dedans directement.
Ouvrir des "doublons" est mal vu !
(j'ai supprimé l'ancien message...)
Merci.
0
lerod83 Messages postés 64 Date d'inscription   Statut Membre Dernière intervention  
 
Merci Jordan pour votre remarque!

Non, je ne veux pas vider le SRC mais qu'il revienne à src="images/img_bouton/add_photo.gif" , et je ne sais pas comment faire

Merci.
0
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752 > lerod83 Messages postés 64 Date d'inscription   Statut Membre Dernière intervention  
 
Tout simplement : 
document.getElementById("uploadPreview1").src ="images/img_bouton/add_photo.gif";
0
lerod83 Messages postés 64 Date d'inscription   Statut Membre Dernière intervention  
 
Je suis encore très débutant avec javascript.
J'ai trouvé sur le net ces script mais il en manque le bouton EFFACER, j'ai essayé de le faire mais pas réussi!

et je ne sais pas exactement où vais-je insérer cette code que vous venez de donner parce que là j'ai deux script: javascript et jquery!


En attente de votre reponse, merci!
0
lerod83 Messages postés 64 Date d'inscription   Statut Membre Dernière intervention  
 
C'est resolu Jordan

Merci bcp à vous!
0

Discussions similaires

Civilité (Mr,Mme,Melle) n' apparait pas lors de l'exécution du formulaire
azixe -
cs_Le Pivert -

1 réponse