How to make an image function like the “browse” button of a file input field?

Question

I made a site for a client which requires the user to click an image and then a input type file field shows up with the usual browse button and submit button. The user then finds a file on their hard drive and clicks upload.

But my client doesn't like this, she wants the image itself to function like the browse button, so when the user clicks the image it will automatically prompt them to choose a file from their hard drive.

My first instinct is to do it this way:

I will still have the input type file form field but hide it using css display none property. When the user clicks the image I will use jQuery to automatically click the browse button as a result. I'm not sure if this will work as I haven't implemented it yet. But before I do can you think of a better/cleaner way of doing this?

Answer 1

Create a textfield and an image. So that they align themselves with the input type file. Now reduce the opacity of the input the file. When you click on the image its actually clicking on the transparent file type. On change of input type files value change value of textfield.

<input type="text" style="color: #666;width:155px;vertical-align:top;" id='file-upload-text' />
<a href='javascript:void(null);' > <img src='browse.png' > </a>
<input type="file" id="file-upload" name="Filedata" style="color:#666;position:relative;z-index:2;opactity:0;-moz-opacity:0 ;filter:alpha(opacity: 0);" >
<a href='javascript:void(null);'>
<input type='image' src='upload.png' id="file-upload-submit">  </a>

and the script part can be:

jQuery(document).ready(function(){

jQuery("#file-upload").change(function(){
    jQuery("#file-upload-text").val(this.value);
});

});

Answer 2

An idea based on some of the above

<div id="file-upload-text"></div>
<div style="background: url(http://phpfileuploader.com/images/upload.png); width: 48px; height: 48px; overflow: hidden">
<input type="file" id="file-upload" name="Filedata" style="opacity:0;-moz-opacity:0 ;filter:alpha(opacity: 0); width: 48px; height: 48px;" onchange="document.getElementById('file-upload-text').innerHTML= this.value" >
</div>

Line 1 : where the path to the file will result, use CSS
Line 2 : div with background image of your image button, width and height set to image, and overflow set to hidden.
Line 3 : File Input Tag with opacity at 0 (also filter or MSIE); onchange event to change the inner html of div in Line 1 with value of file input tag
Line 4 : close div

Answer 3

It is a proven standard that browsers prevent any change to the file upload fields due to security. You could use Flash uploaders.

Answer 4

I would suggest a similar thing. Call the click event on the upload from the click event on the button. For security reasons, only the file input type can directly open the browsing window.

It is fairly simple to implement a button that calls the file input window to open, see proof of concept on JsFiddle

http://jsfiddle.net/JQaRu/

EDIT: This only works in IE. Apparent calling the click event on a file input is also a security risk for some reason.

EDIT: Modified the style of the file input and now it works in Chrome too... http://jsfiddle.net/JQaRu/40/