Hi,
I have a couple of input type file elements like this :
<input type="file" name="files" id="file0">
<input type="file" name="files" id="file1">
<input type="file" name="files" id="file2">
...
This element is bound to jquery change event like this :
$('input[type=file]').change(FileChangeHandler);
The FileChangeHandler looks like this (don´t thing this is important but I post it eather way) :
function FileChangeHandler() {
if($(this).val().length > 0){
UpdateFileInputs();
}
}
function UpdateFileInputs()
{
var hiddenClass = 'fileHidden';
var visibleClass = 'fileVisible';
var emptyAndVisibleFound = false;
if(!FileThresholdReached())
{
for(var i = 0; i < 10; i++){
if($('#fileInput' + i).hasClass(visibleClass))开发者_Go百科{
if($('#file' + i).val().length < 1){
if(!emptyAndVisibleFound){
emptyAndVisibleFound = true;}
else{
$('#fileInput' + i).attr('class' , hiddenClass);}
}
}
else{
if(!emptyAndVisibleFound){
$('#fileInput' + i).attr('class' , visibleClass);
emptyAndVisibleFound = true;
}
else{
$('#fileInput' + i).attr('class' , hiddenClass);}
}
}
}
}
Problem : The problem is that in IE8 the change appears to be triggered first when the input file element lose focus (not before or after the file browser). In FireFox the change is made direcly after the file browser is closed? In this case I perfer the firefox way.
How can I solve this?
BestRegards
Note : I have tried to create a jsfiddle.net sample but this does not show the problem : http://jsfiddle.net/snowman/NCQ5J/
UPDATE : I have now manage to get a working example, pleas look here : http://www.test.figurspel.net/
According to the jQuery documentation,
The change event is sent to an element when its value changes. ... For select boxes, checkboxes, and radio buttons, the event is fired immediately when the user makes a selection with the mouse, but for the other element types the event is deferred until the element loses focus.
so it looks like IE's behavior of firing the change event when your file input field loses focus seems correct. Firefox may automatically be removing focus on your file input field, thereby triggering the event; if that's the case, we'll need to fashion a way for IE to also blur (or explicitly call your change handler) when selecting a file.
It's not too helpful on circumventing your problem, but I haven't an idea on how to do that as is (i.e. callback when the file select box closes?). I'll definitely update this once I find out something.
This is a bug in jquery 1.4.1, when switching to 1.4.4 the problem was solved.
精彩评论