Internet Explorer et input multiple="true"

**pcouas** · 22/09/2011, 06h28

Bonjour,

J'ai un script qui fait de l'upload, et qui fonctionne en input multiple sous FF, mais pas sous mon IE7, je n'arrive pas clairement a savoir si Microsoft a implemente le input multiple="true" dans IE8,9 ?

Merci d'avance
Philippe

**SpaceFrog** · 22/09/2011, 08h29

un input multiple ?
le code html ressemblerait à quoi ?

**RomainVALERI** · 22/09/2011, 09h15

Oui, c'est une nouveauté HTML5 mais pour Gecko ça ne fonctionne qu'à partir de la 1.9.2

Donc à vue de nez, pour IE < 9 ça me parait compromis....

non ?

**SpaceFrog** · 22/09/2011, 09h19

heu et ça donne quoi un input multiple ?
un select , je vois bien ... mais un input ???

Ha pour les inputs type file ...
http://www.developpez.net/forums/d81...ghlight=upload

**pcouas** · 22/09/2011, 09h48

Bonjour,

Le Code HTML ressemble a ceci, et il fonctionne sous FF3.6 .
Le Input multiple permet dans la fenetre "parcourir" lorsque la touche CTRL est enfonce de choisir plusieurs fichiers.

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
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
 
<head>
	<script src="v4multifiles.js"></script>
</head>
 
<form enctype="multipart/form-data" action="/up1/servlet/servlet36.FM?act=uploadm" method = "post">
	<!-- The file element -- NOTE: it has an ID -->
	<input id="my_file_element" type="file" name="file_1" multiple="true">
	<br>
	<input type="button" value="Upload Files" onClick="this.form.submit();">
</form>
 
 
<div id="files_list"></div>
<script>
	<!-- Create an instance of the multiSelector class, pass it the output target and the max number of files -->
	var multi_selector = new MultiSelector( document.getElementById( 'files_list' ), 'Delete');
	<!-- Pass in the file element -->
	multi_selector.addElement( document.getElementById( 'my_file_element' ) );
</script>
 
 
le fichier JS v4multifiles.js associe
function MultiSelector( list_target, btdelvalue ){
 
	// Where to write the list
	this.list_target = list_target;
	// How many elements?
	this.id = 0;
 
 
	/**
	 * Add a new file input element
	 */
	this.addElement = function( element ){
 
		// Make sure it's a file input element
		if( element.tagName == 'INPUT' && element.type == 'file' ){
 
			// Element name -- what number am I?
			element.name = 'file_' + this.id++;
 
			// Add reference to this object
			element.multi_selector = this;
 
			// What to do when a file is selected
			element.onchange = function(){
 
				// New file input
				var new_element = document.createElement( 'input' );
				new_element.type = 'file';
 
				// Add new element
				this.parentNode.insertBefore( new_element, this );
 
				// Apply 'update' to element
				this.multi_selector.addElement( new_element );
 
				// Update list
				this.multi_selector.addListRow( this );
 
				// Hide this: we can't use display:none because Safari doesn't like it
				this.style.position = 'absolute';
				this.style.left = '-1000px';
 
			};
 
			// Most recent element
			this.current_element = element;
 
		} else {
			// This can only be applied to file input elements!
			alert( 'Error: not a file input element' );
		};
 
	};
 
	/**
	 * Add a new row to the list of files
	 */
	this.addListRow = function( element ){
 
	//fonctionne
	if(element.multiple==false)
	{
		// Row div
		var new_row = document.createElement( 'div' );
 
		// Delete button
		var new_row_button = document.createElement( 'input' );
		new_row_button.type = 'button';
		new_row_button.value = btdelvalue;
 
 
		// References
		new_row.element = element;
 
		// Delete function
		new_row_button.onclick= function(){
 
			// Remove element from form
			this.parentNode.element.parentNode.removeChild( this.parentNode.element );
 
			// Remove this row from the list
			this.parentNode.parentNode.removeChild( this.parentNode );
 
 
			// Re-enable input element (if it's disabled)
			this.parentNode.element.multi_selector.current_element.disabled = false;
 
			// Appease Safari
			//    without it Safari wants to reload the browser window
			//    which nixes your already queued uploads
			return false;
		};
 
		// Set row value
		new_row.innerHTML = element.value;
 
		// Add button
		new_row.appendChild( new_row_button );
 
		// Add it to the list
		this.list_target.appendChild( new_row );
 
 
	}
	else
	{
	for (var i = 0; i < element.files.length; i++) {
 
		// Row div
		var new_row = document.createElement( 'div' );
 
		// Delete button
		var new_row_button = document.createElement( 'input' );
		new_row_button.type = 'button';
		new_row_button.value = btdelvalue;
 
 
		// References
		new_row.element = element.files[i];
 
 
 
		// Delete function
		new_row_button.onclick= function(){
			// Remove this row from the list
			this.parentNode.parentNode.removeChild( this.parentNode ); //fonctionne sur 1, ou enleve le tout mais pose pb compteur ensuite
 
			// Appease Safari
			//    without it Safari wants to reload the browser window
			//    which nixes your already queued uploads
			return false;
		};
 
		// Set row value
		new_row.innerHTML =element.files[i].name;
 
		// Add button
		new_row.appendChild( new_row_button );
 
		// Add it to the list
		this.list_target.appendChild( new_row );
		}
		}
 
	};
 
};