Replace input type = file with image

Question

Like many people, I would like to set up an unmanaged input type = file, and I know that this cannot be done without hacks and / or javascript. But the fact is that in my case, the buttons of the downloaded files are only for downloading images (jpeg | jpg | png | gif), so I was wondering if I can use a “clickable” image that will act just like a file type of input (show the dialog box and the same file $ _FILE on the page).
I found a workaround here and this interesting option (but Chrome = / does not work).

What do you do if you want to add style to your file buttons? If you have any point of view, just click the answer button;)

Answer 1

This is really good for me:

<div class="image-upload"> <label for="file-input"> <img src="placeholder.jpg"/> </label> <input id="file-input" type="file"/> </div> 

With style:

 .image-upload > input { display: none; } 

Basically, the attribute for the label makes it so that clicking on the label is the same as clicking on the specified input .

In addition, the display property set to none makes it so that the input file does not appear at all, hiding it beautiful and clean.

Tested in Chrome, but in accordance with the network should work on all major browsers. :)

EDIT: Added JSFiddle here: https://jsfiddle.net/c5s42vdz/

Answer 2

Actually this can be done in pure css and it is quite easy ...

HTML code

 <label class="filebutton"> Browse For File! <span><input type="file" id="myfile" name="myfile"></span> </label> 

CSS styles

 label.filebutton { width:120px; height:40px; overflow:hidden; position:relative; background-color:#ccc; } label span input { z-index: 999; line-height: 0; font-size: 50px; position: absolute; top: -2px; left: -700px; opacity: 0; filter: alpha(opacity = 0); -ms-filter: "alpha(opacity=0)"; cursor: pointer; _cursor: hand; margin: 0; padding:0; } 

The idea is to position the input absolutely inside your label. set the input font size to something big, which will increase the size of the browse button. He then takes some trial and error using the negative left / top properties to place the enter button behind your label.

When positioning the button, set the alpha value to 1. When you are done, set it to 0 (so you can see what you are doing!)

Make sure you check the browsers because they all display the enter button in a slightly different size.

Here you can see an example (Add Track): http://rakmastering.com/upload/

Answer 3

Great solution from @hardsetting, But I made some improvements to make it work with Safari (5.1.7) on Windows

 .image-upload > input { visibility:hidden; width:0; height:0 } 

 <div class="image-upload"> <label for="file-input"> <img src="placeholder.jpg" style="pointer-events: none"/> </label> <input id="file-input" type="file" /> </div> 

I used "visibility: hidden, width: 0" instead of "display: none" for the safari problem and added an "event-pointer: none" in the img tag to make it work if the input file type tag is in the FORM tag, it seems works for me in all major browsers. Hope this helps someone.

Answer 4

I would use SWFUpload or Uploadify . They need Flash, but you can do whatever you want without a problem.

Any workaround <input type="file"> that attempts to open the "open file" dialog by other means than clicking on the actual control can be removed from browsers for security reasons at any time. (I think that in current versions of FF and IE it is no longer possible to fire this event programmatically.)

Answer 5

This is my method, if I got your point

HTML

 <label for="FileInput"> <img src="tools/img/upload2.png" style="cursor:pointer" onmouseover="this.src='tools/img/upload.png'" onmouseout="this.src='tools/img/upload2.png'" alt="Injaz Msila" style="float:right;margin:7px" /> </label> <form action="upload.php"> <input type="file" id="FileInput" style="cursor: pointer; display: none"/> <input type="submit" id="Up" style="display: none;" /> </form> 

JQuery

 <script type="text/javascript"> $( "#FileInput" ).change(function() { $( "#Up" ).click(); }); </script> 

Answer 6

its very simple you can try:

 $("#image id").click(function(){ $("#input id").click(); }); 

Answer 7

Instead, you can put an image and do it like this:

HTML:

 <img src="/images/uploadButton.png" id="upfile1" style="cursor:pointer" /> <input type="file" id="file1" name="file1" style="display:none" /> 

JQuery

 $("#upfile1").click(function () { $("#file1").trigger('click'); }); 

CAVEAT : In IE9 and IE10, if you run onclick in a file entered via javascript, the form becomes marked as “dangerous” and cannot be placed in javascript, I’m not sure that it can be sent traditionally.

Answer 8

  form input[type="file"] { display: none; } 

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>Simple File Upload</title> <meta name="" content=""> </head> <body> <form action="upload.php" method="post" enctype="multipart/form-data"> Select image to upload: <label for="fileToUpload"> <img src="http://s3.postimg.org/mjzvuzi5b/uploader_image.png" /> </label> <input type="File" name="fileToUpload" id="fileToUpload"> <input type="submit" value="Upload Image" name="submit"> </form> </body> </html> 

RUN SNIPPET or just copy the code above and execute. You will get what you want. Very simple and efficient without javascript. Enjoy !!!

Answer 9

The input itself is hidden with the visibility of CSS: hidden.

Then you can get any element you want - snap or image .. when you click on the anchor / image, click on the hidden input field - a dialog box appears to select the file.

EDIT: it actually works in Chrome and Safari, I just noticed that this is not the case in FF4Beta p>

Answer 10

Work code:

just hide the entrance and do it like this.

 <div class="ImageUpload"> <label for="FileInput"> <img src="../../img/Upload_Panel.png" style="width: 18px; margin-top: -316px; margin-left: 900px;"/> </label> <input id="FileInput" type="file" onchange="readURL(this,'Picture')" style="cursor: pointer; display: none"/> </div>