jquery - why does this file input not populate in IE

Question

Hi I'm trying to have div styled as a button which, when clicked opens a hidden file browser for you to select a file. The selected file then appears in the hidden file input (I've un-hidden it below)

This all works fine on every browser except IE (humph!)

My code is:

<div id="TileImageUpload" style="border:1px solid #000000; padding:5px;"> Upload an image</div>
<br/>

<form action="uploadImage.php" target="upload_target" id="TileUploadImageForm" enctype="multipart/form-data" method="post" accept-charset="utf-8">
<div style="display:none;"><input type="hidden" name="_method" value="POST"/></div>
<input type="file" name="data[Tile][image]"  id="TileImage"/>
<input type="submit" value="Submit">
</form>

<iframe id="upload_target" name="upload_target" src="#" ></iframe> 

and the javascript is:

$('#TileImage').change(function() {$('#TileUploadImageForm').submit();});
$('#TileImageUpload').click(function(){$('#TileImage').click();});

a fiddle: http://jsfiddle.net/NVpHY/1/

Can anyone enlighten me?

Answer 1

I think IE doesn't like hidden inputs, a work around is to use a label tag along with the input. IE and most other browsers will have the file browser open if the label for a file input is clicked as well as if you hit the actual input. You then need to hide the file input by putting it off the screen rather than having it styled hidden.

I found a full working example someone has made here: http://jsfiddle.net/djibouti33/uP7A9/

<form id="uploader-form" action="http://hotblocks.nl/_http_server.php">
<label for="fileinput" id="link" class="trigger-file-input">Link Label</label>
<input type="file" id="fileinput" />
</form>

JS

$('#fileinput').on("change", function() {
    $('#uploader-form').submit();
});
if($.browser.mozilla) {
    $('.trigger-file-input').click(function() {
          $('#fileinput').click();                             
    });
}

css

#fileinput { position: absolute; left: -9999em; }
#link { color: #2a9dcf; font-size: 16px; }
#link:hover { text-decoration: underline; cursor: pointer; }