Showing posts from November, 2012

Open file selection box when click a link or an image

Sometimes you will meet requirements like this:

I want someone to click on a link/an image and the file selection box will open immediately.  Then user can upload an image through AJAX.  (Think Facebook cover photo upload)

At first, it seems that it is easy.  Here is what I did:

<input type="file" id="file1" name="file1" style="display:none;" />
<a href="javascript:;" onclick="$('#file1').click()">Some link text</a>

It seems perfect when you combined it with jQuery upload.  But I was wrong.  As of this writing, the above lines work in FF v.17 and Chrome v.23, but it does not work in IE9.  It will prompt:

SCRIPT5: Access is denied
It is definitely NOT cross domain problem.  It turns out that it is a bug in IE (Original link).

So, how to solve this: The answer is quite counter-intuitive.  Here are the steps to do so:

Create an <input type="file" /> tag, but this time, do not use display:n…