1

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?

Timmy O'tool
  • 23
  • 1
  • 4
  • possible duplicate of [How to access the properties of a file upload button?](http://stackoverflow.com/questions/722050/how-to-access-the-properties-of-a-file-upload-button) – Yahel Mar 16 '11 at 04:29
  • @experimentX Your edit of the title is incorrect, I am not wanting to replace just the browse button but the entire file input field AND browse button. The title makes it seem like I want to replace just the browse button while still leaving the input field which is resulting in different answers than those I need. – Timmy O'tool Mar 16 '11 at 05:00
  • This is the way i've done it in the past, basically use a – Nick Dec 10 '15 at 20:35
  • whoops, this is the link i meant to post: http://stackoverflow.com/a/25825731/1076471 – Nick Dec 10 '15 at 20:41

4 Answers4

4

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);
});

});

sushil bharwani
  • 29,685
  • 30
  • 94
  • 128
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

Rod Diaz
  • 121
  • 1
  • 5
0

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

AbiusX
  • 2,379
  • 20
  • 26
0

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/

user532635
  • 3
  • 2
Peter Olson
  • 139,199
  • 49
  • 202
  • 242