Javascript Fonction qui efface un champ précis
Résolu
Qd
-
Qd -
Qd -
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 :
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 :
et pour la partie javascript j'ai ceci :
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:
- Javascript Fonction qui efface un champ précis
- Fonction si et - Guide
- Récupérer un numéro de téléphone effacé - Accueil - Android
- Comment recuperer un message effacé sur whatsapp - Guide
- Comment repondre a un message precis sur whatsapp - Guide
- Fonction miroir - Guide