Javascript Fonction qui efface un champ précis

Résolu/Fermé
Qd - Modifié le 24 févr. 2021 à 15:07
 Qd - 24 févr. 2021 à 17:04
Bonjour,

Après plusieurs tentatives je n'arrive pas à supprimer ou faire un reset de l'interface sur un seul input file. Lorsque l'utilisateur appuie sur le bouton qui appelle ma fonction, celle-ci supprime tout mes inputs files. Je n'ai pas vraiment envie de faire une appellation différente pour chaque inputs files sinon je dois rajouter plein de lignes qui sont répétitives...

mon code php :
<form action="save_doc.php" method="POST" enctype='multipart/form-data' class="needs-validation" novalidate>

<div id="uploader">
<div class="row uploadDoc">
  <div class="col-sm-4">
    <div class="docErr">Veillez upload au format pdf, jpg, jpeg, png</div><!--error-->
    <div class="fileUpload btn btn-orange">
      <img src="https://image.flaticon.com/icons/svg/136/136549.svg" class="icon2">
      <span class="upl" id="upload">Parcourir</span>
      <input type="file" class="upload up" name="upload1" accept="image/png, image/jpeg, .pdf" id="up" onchange="readURL(this);" required/>
      <div class="invalid-feedback">
        Document obligatoire.
   </div>
    </div><!-- btn-orange -->
  </div><!-- col-3 -->
  <div class="col-sm-7">
    <input type="text" class="form-control" name="" placeholder="Carte d'identite" disabled >
  </div><!--col-8-->
  <div class="col-sm-1">
  <a href="#" onclick="effacer()"><i class="fas fa-times fa-xs" style="color:red;"></i></a>
  </div>
</div><!--row-->
</div><!--uploader-->

J'en ai 9 en tout de champs ou je récupère des documents. pour ma fonction qui efface j'ai fait le code suivant :
<script>
  function effacer(){
    $(".upl").remove();
    $(".icon2").remove();
    $(".fileUpload").append('<img src="https://image.flaticon.com/icons/svg/136/136549.svg" class="icon2"><span class="upl" id="upload">Parcourir</span><input type="file" class="upload up" name="upload1" accept="image/png, image/jpeg, .pdf" id="up" onchange="readURL(this);" />');
  };
</script>

et pour la partie javascript j'ai ceci :
var fileTypes = ['pdf', 'jpg', 'jpeg', 'png'];  //acceptable file types
function readURL(input) {
    if (input.files && input.files[0]) {
        var extension = input.files[0].name.split('.').pop().toLowerCase(),  //file extension from input file
            isSuccess = fileTypes.indexOf(extension) > -1;  //is extension in acceptable types

        if (isSuccess) { 
            var reader = new FileReader();
            reader.onload = function (e) {
                if (extension == 'pdf'){
                    $(input).closest('.fileUpload').find(".icon2").attr('src','https://image.flaticon.com/icons/svg/179/179483.svg');
                }
                else if (extension == 'png'){ $(input).closest('.fileUpload').find(".icon2").attr('src','https://image.flaticon.com/icons/svg/136/136523.svg'); 
                }
                else if (extension == 'jpg' || extension == 'jpeg'){
                    $(input).closest('.fileUpload').find(".icon2").attr('src','https://image.flaticon.com/icons/svg/136/136524.svg');
                }
                else {
                    $(input).closest('.uploadDoc').find(".docErr").slideUp('slow');
                }
            }

            reader.readAsDataURL(input.files[0]);
        }
        else {
            $(input).closest('.uploadDoc').find(".docErr").fadeIn();
            setTimeout(function(){
                    $('.docErr').fadeOut('slow');
                    }, 9000);
        }
    }
}
$(document).ready(function(){
   $(document).on('change','.up', function(){
    var id = $(this).attr('id'); /* gets the filepath and filename from the input */
       var profilePicValue = $(this).val();
       var fileNameStart = profilePicValue.lastIndexOf('\\'); /* finds the end of the filepath */
       profilePicValue = profilePicValue.substr(fileNameStart + 1).substring(0,20); /* isolates the filename */
       if (profilePicValue != '') {
          $(this).closest('.fileUpload').find('.upl').html(profilePicValue); /* changes the label text */
       }
   });

EDIT : Ajout des balises de code !

En espérant que quelqu'un me réponde rapidement...
A voir également:

2 réponses

devGnode Messages postés 17 Date d'inscription samedi 13 février 2021 Statut Membre Dernière intervention 5 mars 2021 2
Modifié le 24 févr. 2021 à 16:49
Hello,

Tu utilise le Selecteur className il appliquera
.remove();
à tous les éléments, sélectionne ta poignée avec
.get( number ).remove();


1
Bonjour devGnode,

Je vous remercie pour votre aide j'ai réussi à faire ce que je voulais.
0