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 jQueryQCM jQuery – Partie 1QCM sur jQuery avec des réponses pour la préparation des test techniques, des tests en ligne, aux examens et aux certifications. Ces questions et réponses…Lire plus
Partagez cet article

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

  • Avatar
    avril 12, 2020 à 6:48
    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
    • Thomas Clavet
      avril 12, 2020 à 7:05
      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 de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *