choose file box by clicking on image ? (not with browse button)

file-upload, input

Solution

Long answer: Yes, you absolutely can. Get ready for some Javascript/CSS haxx that I cooked up. First the Javascript:

function getFilePathFromDialog() {
    document.getElementById('fileBrowser').click();
    document.getElementById('filePath').value = document.getElementById('fileBrowser').value;
}

Now the HTML:

<img src="path/to/image.jpg" onlick="getFilePathFromDialog();">
<input type="text" id="filePath" name="filePath" /><br />
<input type="file" id="fileBrowser" name="fileBrowser" style="visibility:hidden; display:none;" />

Basically all this does is hide the actual file dialog input field from view. When you click on your image it will fire the file dialog's click event. When the user chooses a file and clicks "Open", it will put the file path selected in the textbox called "filePath".

Problem

Original source