Comment récupérer le nom d’un fichier sélectionné avec input type file en jQuery

Vous pouvez utiliser la méthode change() de jQuery pour obtenir le nom de fichier sélectionné par l’input du formulaire HTML .
 
 

Code HTML:
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Récupérer le nom d'un fichier sélectionné</title>
		<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
		<script type="text/javascript">
			// Mettez le code jQuery ici.
		</script>
	</head>
	<body>
	   <input type="file">
	</body>
</html>

 

Code jQuery:
$(document).ready(function() {
    $('input[type="file"]').change(function(e) {
        var file = e.target.files[0].name;
        alert('Le fichier "' + file + '" a été sélectionné.');
    });
});
Résultat
QCM jQuery

2 réflexions sur “Comment récupérer le nom d’un fichier sélectionné avec input type file en jQuery

  • avril 12, 2020 à 6:48 pm
    Permalien

    Bonjour tout le monde, je cherche a modifier le contenu d’un input après avoir choisie un fichier sur la fenetre de choix de fichiers. je veux dire par modifier le contenu c’est de remplacer le fichier que possède cet input par un autre. comment le faire en programmant ?

    avez vous une idée svp ?
    Merci d’avance.

    Répondre
    • avril 12, 2020 à 7:05 pm
      Permalien

      Bonjour,

      Malheureusement, vous ne pouvez pas. Et c’est une mesure de sécurité. Imaginez si quelqu’un écrit un script qui définit la valeur d’entrée du fichier vers un fichier sensible.

      Par exemple, si vous essayer d’exécuter le code suivant, vous allez obtenir une erreur de sécurité dans la console :

      $(document).ready(function(){
              var file = "autre-fichier.txt";
              $('input:file').val(file);
              console.log($('input:file').val());
      });
      Répondre

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *