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

Version imprimable

12/08/2011, 11h17
Johann7751

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:

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

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

J'ai essayé la méthode

Code:

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

et aussi celle ci :

Code:

$("#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.
12/08/2011, 11h36
Bovino

Pour des raisons de sécurité (qui devraient sembler évidentes...), la valeur d'un input file est read-only.
12/08/2011, 11h52
Johann7751

Merci.
12/08/2011, 13h10
Invité
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 ? :nono:

on peut en javascript en tout cas :
Code:

1 2 3 4 5 // si extension pas ok (par exemple) // ..... document.getElementById('idartPhoto').value = ''; // .....
Du coup en jquery, ca devrait donner :

Code:

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

non ?
12/08/2011, 13h20
Johann7751
Citation:
Envoyé par jreaux62

Euuuuh ... tu es sûr ? :nono:

on peut en javascript en tout cas :

Code:

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

Du coup en jquery, ca devrait donner :

Code:

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

non ?
J'ai essayé, chez moi ça ne fonctionne pas.
J'arrive bien à lire la valeur mais impossible de la modifier/supprimer.
12/08/2011, 13h23
Bovino

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

Au temps pour moi... :oops:

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

Code:

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

ne fonctionne.

12/08/2011, 13h31
Bovino

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...
12/08/2011, 13h34
Johann7751

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

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

Code:

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 ...

12/08/2011, 13h38
Invité

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

Exact, ca ne marche pas sur :furieux: IE 8 ! !

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

- alors que firefox -> mondufichier.jpg
12/08/2011, 13h43
Bovino

1 pièce(s) jointe(s)

Citation:

Envoyé par jreaux62

ca marche ...

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

Pièce jointe 81501
12/08/2011, 13h46
Invité

Plus personne n'utilise IE ! :whistle:

... si ? ...

... ah bon. :whistle2:

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:

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:

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