jQuery input file click method and access denied on IE

Sonia picture Sonia · Aug 31, 2011 · Viewed 7.4k times · Source

I'm trying to use only a button as input file, it works fine in Firefox, Chrome, Safari but not in IE... I always get 'access denied' when submitting the form.

The code:

$('#input_file').click();

Is there a real fix for it? I wasted about 2 hours on google but I can't find it.

Answer

Martijn Bleeker picture Martijn Bleeker · May 28, 2013

I found a way around it. Wrap the button in label tags like this:

<label for="fileinput"><div class="button">Upload file</div></label>


<form>
  <input id="fileinput" name="file" type="file">
</form>

Clicking the label will trigger the file input without invalidating the form in internet explorer (tested in IE9 & IE10)

EDIT: serve this code to IE and keep the javascript solution for other browsers. Firefox will not trigger the file input field when the label is clicked.