Javascript select input type file

Question

I wanted to activate an input type=file (opening the file selection window) by using an onclick event on an image. I tried using the html label tag, however, this doesn't work in IE and Safari. This is the form I'm using.

<form id="MyForm" action="Thispage.php" method="POST" enctype="multipart/form-data">
    <input type="file" id="ImageFile"/>
</form>

I first tried this:

<label for="ImageFile"><img src="MyImage.jpg"></label>
<!--This didn't worked in IE and Safari-->

I thought I could do it with an onclick event like this:

<img src="MyImage" onclick="Javascript:document.getElementById('ImageFile').click()">

This unfortunately didn't worked in Safari.

Is there any method that works in all browsers?

I would like a detailed explanation, because I'm not an expert. It helps me understand which code leads to which action.

Nuno Duarte · Accepted Answer · 2013-10-15 17:12:46Z

1

Change the "Id" to "name" and try again.

I do not have the safari here, but in all other worked perfectly.

Try this:

<input type='file' name='nameFile'>

Or if you prefer, look: http://www.w3schools.com/tags/att_input_type.asp

This site is a great reference.

Hope this helps!

answered Oct 15, 2013 at 17:12

Nuno Duarte

1,0368 silver badges4 bronze badges

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

1 Comment

D-Inventor Over a year ago

How do I use the name of the input? I've found a method using getElementsByName(), but it didn't worked in firefox.

Collectives™ on Stack Overflow

Javascript select input type file

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related