IE can't send file upload when its hidden for styling purposes

问题

Well, i am pretty stuck so i am opening another question about styling the file-fileupload form element.

After some tryings i'll finally (thought) i had it working, but then as usual IE will start protesting ones again. The thing is, i'll have the following form, it hides the real file-input with css and so it replaces it with a fake one, using the fileHiddenInput div.

html:

<form enctype="multipart/form-data" method="post" name="uploadform" action = "">                    
  <div class="input-append">
    <input type="text" id = "appendedInputButtons" class="span2" name="fileuploadtext"><input type="button" id="upbutton" class="btn" value="Select"><input type="submit" name="upload" value="uploaden" class="btn">
  </div>
  **<div class="fileHiddenInput"><input id="upfile" type="file" name="file" value="upload" /></div>**
</form>

css:

/** file input **/
.fileHiddenInput {
    height: 0px;
    width: 0px; 
    overflow:hidden;
}

I'll use some jquery to send the form, i could place that code also here. But after many trial and error, i'll found out that IE9 won't send the file-input as long if keep hiding the file-input with css using the fileHiddenInput div. When make i'll make the file-input visible by removing the fileHiddenInput div or making it visible using css, then the form just get send as it should do.

Does anyone know or does anyone has found a workaround?

回答1:

A few strategy of hiding you may try, one is by putting the element off the screena by setting style like

position: absolute; z-index: 19999; top: -1000px; left: -1000px;

Another way would be covering the file input element with an opaque control.

回答2:

Opacity 0 for element caused it to count as hidden.

Hopefully this could help someone - I was having a problem getting file_field.set to work with IE and selenium/watir. The problem was that the (:input => "upload") was under an anchor tag. When looking at it through the inspector we saw that the opacity of the file_field underneath was set to 0.. which was causing an Element not visible error.

Setting the opacity to > 0 (0.01 worked in our case) allowed the web driver to interact with it and spawn the upload window and set the file path.

This was testing on Win7 with IE11

来源：https://stackoverflow.com/questions/11415852/ie-cant-send-file-upload-when-its-hidden-for-styling-purposes