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?

Check this.

The Alpha
– The Alpha

2013-04-27 15:44:39 +00:00
Commented Apr 27, 2013 at 15:44 — The Alpha
– The Alpha, Commented Apr 27, 2013 at 15:44

Zaphod Beeblebrox · Accepted Answer · 2013-04-29 19:10:37Z

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; }

answered Apr 29, 2013 at 19:10

Zaphod Beeblebrox

5624 gold badges12 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Pierre Over a year ago

Well.... The reason for IE not liking it is because you have to use proper end tags on your controls. <input ... /> should become <input ...></input>. Try it and see if it works better.

Collectives™ on Stack Overflow

jquery - why does this file input not populate in IE

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related