CODEWITHSUNDEEP
htmlfile-uploadbrowserwindowdom-events
D-Inventor
D-Inventor

Reputation: 480

Javascript select input type file

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.

Upvotes: 1

Views: 197

Answers (1)

Nuno Duarte
Nuno Duarte

Reputation: 1036

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!

Upvotes: 1

Related Questions