Effacer la valeur à l'intérieur d'un input type=file (l'attribut 'value') sous IE9 [Résolu]

Johann7751 · 12/08/2011, 11h17

Bonjour,

Dans ma page, j'ai un composant permettant d'Upload des fichiers :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<input type="file" id="FileUploader" />

Est ce possible d'effacer la valeur d'un input type=file ?

J'ai essayé la méthode

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$("#FileUploader").removeAttr("value");

et aussi celle ci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$("#FileUploader").attr("value", "");

mais sans succès..

En mode debug (Je travaille en ASP.NET, j'utilise la fonctionnalité QuickWatch), je vois bien que mon sélecteur est correct, et j'arrive également à afficher l'attribut 'value' de mon input type=file.
Par contre impossible de l'effacer...
Est ce un comportement par défaut du composant input type=file ou est ce que c'est moi qui m'y prends mal ?

Merci de votre aide.

Bovino · 12/08/2011, 11h36

Pour des raisons de sécurité (qui devraient sembler évidentes...), la valeur d'un input file est read-only.

Johann7751 · 12/08/2011, 11h52

Merci.

jreaux62 · 12/08/2011, 13h10

Citation:

Envoyé par Bovino

Pour des raisons de sécurité (qui devraient sembler évidentes...), la valeur d'un input file est read-only.

Euuuuh ... tu es sûr ?

on peut en javascript en tout cas :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
// si extension pas ok (par exemple)
// .....
document.getElementById('idartPhoto').value = '';
// .....

Du coup en jquery, ca devrait donner :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$("#FileUploader").val("");

non ?

Johann7751 · 12/08/2011, 13h20

Citation:

Envoyé par jreaux62

Euuuuh ... tu es sûr ?

on peut en javascript en tout cas :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
// si extension pas ok (par exemple)
// .....
document.getElementById('idartPhoto').value = '';
// .....

Du coup en jquery, ca devrait donner :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$("#FileUploader").val("");

non ?

J'ai essayé, chez moi ça ne fonctionne pas.
J'arrive bien à lire la valeur mais impossible de la modifier/supprimer.

Bovino · 12/08/2011, 13h23

Effectivement, affecter une valeur vide fonctionne... mais pour toute autre valeur, on obtient bien une erreur...

Au temps pour moi...

Johann7751 · 12/08/2011, 13h30

Vous m'intriguez, je vous assure que chez moi, aucune des méthodes :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
            document.getElementById('FileUploader').value = '';
            $("#FileUploader").val("");
            $("#FileUploader").removeAttr("value"); 
            $("#FileUploader").attr("value", "");

ne fonctionne.

Bovino · 12/08/2011, 13h31

Citation:

Envoyé par Johann7751

J'ai essayé, chez moi ça ne fonctionne pas.
J'arrive bien à lire la valeur mais impossible de la modifier/supprimer.

IE et Opera n'autorisent pas la remise à zéro non plus...

Johann7751 · 12/08/2011, 13h34

OK, le comportement peut changer selon le navigateur donc ...
J'ai oublié de préciser mon navigateur, je suis sous IE9.

jreaux62 · 12/08/2011, 13h36

Je ne veux pas avoir l'air de "me la péter" mais :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<html>
<head>
<!-- Scripts Google : initialisation jquery -->
    	<script charset="utf-8" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
	<script>
	$(function() {
		$("#FileUploader").change(function() {
			alert ('avant : '+$("#FileUploader").val());
			$("#FileUploader").val('');
			alert ('apres : '+$("#FileUploader").val());
		});
	});
	</script>
</head>
<body>
	<form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
		<input type="file" id="FileUploader" />
	</form>
</body>
</html>

ca marche ...

jreaux62 · 12/08/2011, 13h38

re-euuuuh. J'ai testé sur firefox + safari...

Exact, ca ne marche pas sur

IE 8 ! !

TRES bizarre, IE !
- IE me met en value -> C:\fakepath\mondufichier.jpg (bizarre, non ?)
- euuh ... safari ... -> aussi !

- alors que firefox -> mondufichier.jpg

Bovino · 12/08/2011, 13h43

Citation:

Envoyé par jreaux62

ca marche ...

Ben... sur IE, le test ne me convainc pas vraiment

file.gif

jreaux62 · 12/08/2011, 13h46

Plus personne n'utilise IE !

... si ? ...

... ah bon.

jreaux62 · 06/09/2011, 08h13

Tiens ! Je viens de trouver ici l'explication de "C:\fakepath\" :

Citation:

For historical reasons, the value IDL attribute prefixes the filename with the string "C:\fakepath\". Some legacy user agents actually included the full path (which was a security vulnerability). As a result of this, obtaining the filename from the value IDL attribute in a backwards-compatible way is non-trivial. The following function extracts the filename in a suitably compatible manner:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
function extractFilename(path) {
  if (path.substr(0, 12) == "C:\\fakepath\\")
    return path.substr(12); // modern browser
  var x;
  x = path.lastIndexOf('/');
  if (x >= 0) // Unix-based path
    return path.substr(x+1);
  x = path.lastIndexOf('\\');
  if (x >= 0) // Windows-based path
    return path.substr(x+1);
  return path; // just the filename
}

This can be used as follows:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
<p><input type=file name=image onchange="updateFilename(this.value)"></p>
<p>The name of the file you picked is: <span id="filename">(none)</span></p>
<script>
 function updateFilename(path) {
   var name = extractFilename(path);
   document.getElementById('filename').textContent = name;
 }
</script>

ps : pour que ca marche sur IE(8), il faut changer .textContent par .innerHTML

12/08/2011, 11h17	#1
Johann7751 Membre régulier Johann Analyste Programmeur Junior Inscription : février 2009 Messages : 216 Détails du profil Informations personnelles : Nom : Johann Âge : 26 Localisation : France Informations professionnelles : Activité : Analyste Programmeur Junior Informations forums : Inscription : février 2009 Messages : 216 Points : 98 Points : 98	Effacer la valeur à l'intérieur d'un input type=file (l'attribut 'value') sous IE9 Bonjour, Dans ma page, j'ai un composant permettant d'Upload des fichiers : Code : Sélectionner tout - Visualiser dans une fenêtre à part <input type="file" id="FileUploader" /> Est ce possible d'effacer la valeur d'un input type=file ? J'ai essayé la méthode Code : Sélectionner tout - Visualiser dans une fenêtre à part $("#FileUploader").removeAttr("value"); et aussi celle ci : Code : Sélectionner tout - Visualiser dans une fenêtre à part $("#FileUploader").attr("value", ""); mais sans succès.. En mode debug (Je travaille en ASP.NET, j'utilise la fonctionnalité QuickWatch), je vois bien que mon sélecteur est correct, et j'arrive également à afficher l'attribut 'value' de mon input type=file. Par contre impossible de l'effacer... Est ce un comportement par défaut du composant input type=file ou est ce que c'est moi qui m'y prends mal ? Merci de votre aide.
	00

12/08/2011, 11h36	#2
Bovino Responsable Développement Web Didier Mouronval Développeur Web Inscription : juin 2008 Messages : 13 807 Détails du profil Informations personnelles : Nom : Didier Mouronval Âge : 41 Localisation : France, Gironde (Aquitaine) Informations professionnelles : Activité : Développeur Web Secteur : High Tech - Éditeur de logiciels Informations forums : Inscription : juin 2008 Messages : 13 807 Points : 35 797 Points : 35 797	Pour des raisons de sécurité (qui devraient sembler évidentes...), la valeur d'un input file est read-only. __________________ Pas de question technique par MP ! Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi ! Vous possédez un blog et aimeriez diffuser vos billets sur le forum, contactez-moi ! Mes formations video2brain : La formation complète sur JavaScript • JavaScript et le DOM par la pratique • PHP 5 et MySQL : les fondamentaux Mon livre sur jQuery
	00

12/08/2011, 11h52	#3
Johann7751 Membre régulier Johann Analyste Programmeur Junior Inscription : février 2009 Messages : 216 Détails du profil Informations personnelles : Nom : Johann Âge : 26 Localisation : France Informations professionnelles : Activité : Analyste Programmeur Junior Informations forums : Inscription : février 2009 Messages : 216 Points : 98 Points : 98	Merci.
	00

12/08/2011, 13h23	#6
Bovino Responsable Développement Web Didier Mouronval Développeur Web Inscription : juin 2008 Messages : 13 807 Détails du profil Informations personnelles : Nom : Didier Mouronval Âge : 41 Localisation : France, Gironde (Aquitaine) Informations professionnelles : Activité : Développeur Web Secteur : High Tech - Éditeur de logiciels Informations forums : Inscription : juin 2008 Messages : 13 807 Points : 35 797 Points : 35 797	Effectivement, affecter une valeur vide fonctionne... mais pour toute autre valeur, on obtient bien une erreur... Au temps pour moi... __________________ Pas de question technique par MP ! Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi ! Vous possédez un blog et aimeriez diffuser vos billets sur le forum, contactez-moi ! Mes formations video2brain : La formation complète sur JavaScript • JavaScript et le DOM par la pratique • PHP 5 et MySQL : les fondamentaux Mon livre sur jQuery
	00

12/08/2011, 13h34	#9
Johann7751 Membre régulier Johann Analyste Programmeur Junior Inscription : février 2009 Messages : 216 Détails du profil Informations personnelles : Nom : Johann Âge : 26 Localisation : France Informations professionnelles : Activité : Analyste Programmeur Junior Informations forums : Inscription : février 2009 Messages : 216 Points : 98 Points : 98	OK, le comportement peut changer selon le navigateur donc ... J'ai oublié de préciser mon navigateur, je suis sous IE9.
	00

12/08/2011, 13h38	#11
jreaux62 Rédacteur Jérôme Réaux Webdesigner Inscription : août 2008 Messages : 2 993 Détails du profil Informations personnelles : Nom : Jérôme Réaux Âge : 45 Localisation : France, Pas de Calais (Nord Pas de Calais) Informations professionnelles : Activité : Webdesigner Secteur : Arts - Culture Informations forums : Inscription : août 2008 Messages : 2 993 Points : 5 786 Points : 5 786	re-euuuuh. J'ai testé sur firefox + safari... Exact, ca ne marche pas sur IE 8 ! ! TRES bizarre, IE ! - IE me met en value -> C:\fakepath\mondufichier.jpg (bizarre, non ?) - euuh ... safari ... -> aussi ! - alors que firefox -> mondufichier.jpg __________________ "Ce qui se conçoit bien s'énonce clairement - Et les mots pour le dire arrivent aisément." Nicolas Boileau-Despréaux, Homme de lettres français (1636-1711), principal théoricien de l'esthétique classique. Site perso Mes tutos DVP : Gestion-Affichage de Nouvelles - Affichage en tableau HTML - Fonctions de redimensionnement d'images
	00

12/08/2011, 13h46	#13
jreaux62 Rédacteur Jérôme Réaux Webdesigner Inscription : août 2008 Messages : 2 993 Détails du profil Informations personnelles : Nom : Jérôme Réaux Âge : 45 Localisation : France, Pas de Calais (Nord Pas de Calais) Informations professionnelles : Activité : Webdesigner Secteur : Arts - Culture Informations forums : Inscription : août 2008 Messages : 2 993 Points : 5 786 Points : 5 786	Plus personne n'utilise IE ! ... si ? ... ... ah bon. __________________ "Ce qui se conçoit bien s'énonce clairement - Et les mots pour le dire arrivent aisément." Nicolas Boileau-Despréaux, Homme de lettres français (1636-1711), principal théoricien de l'esthétique classique. Site perso Mes tutos DVP : Gestion-Affichage de Nouvelles - Affichage en tableau HTML - Fonctions de redimensionnement d'images
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email