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

juillet 4, 2019février 10, 2020 Amine KOUIS 2 Commentaires

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

QCMs qui pourraient vous intéresser :

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

ihaddadene
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
- Thomas Clavet
  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

Code HTML:

Code jQuery:

Vous pourrez aussi aimer

Comment changer la valeur d’un input avec jQuery

Soumettre un formulaire sans recharger la page en utilisant Ajax, jQuery et PHP

Envoyer un formulaire en Ajax avec JQuery

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

Laisser un commentaire Annuler la réponse