Sujet Précédent Sujet Suivant

Effacer ou rejeter un uploaded file sur formulaire

Résolu/Fermé
lerod83 Messages postés 64 Date d'inscription mardi 11 août 2015 Statut Membre Dernière intervention 25 novembre 2019 - Modifié par lerod83 le 26/04/2016 à 09:56
lerod83 Messages postés 64 Date d'inscription mardi 11 août 2015 Statut Membre Dernière intervention 25 novembre 2019 - 26 avril 2016 à 16:35
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 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 4 650
26 avril 2016 à 09:55
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 mardi 11 août 2015 Statut Membre Dernière intervention 25 novembre 2019
Modifié par lerod83 le 26/04/2016 à 10:00
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 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 4 650 > lerod83 Messages postés 64 Date d'inscription mardi 11 août 2015 Statut Membre Dernière intervention 25 novembre 2019
26 avril 2016 à 10:04
Tout simplement : 
document.getElementById("uploadPreview1").src ="images/img_bouton/add_photo.gif";
0
lerod83 Messages postés 64 Date d'inscription mardi 11 août 2015 Statut Membre Dernière intervention 25 novembre 2019
Modifié par lerod83 le 26/04/2016 à 10:34
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 mardi 11 août 2015 Statut Membre Dernière intervention 25 novembre 2019
26 avril 2016 à 16:35
C'est resolu Jordan

Merci bcp à vous!
0