Replace input type file by an image

Question

Like a lot of people  I d like to customize the ugly input type file  and I know that it can t be done without some hacks and or javascript  But  the thing is that in my case the upload file buttons are just for uploading images  jpeg jpg png gif   so I was wondering if I could use a  clickable  image which would act exactly as an input type file  show the dialog box  and same   FILE on submitted page   I found some workaround here  and this interesting one too  but does not work on Chrome       What do you guys do when you want to add some style to your file buttons  If you have any point of view about it  just hit the answer button

User · Answer

Great solution by  hardsetting  But I made some improvements to make it work with Safari 5 1 7  in windows   x000D   x000D   image-upload  gt  input   x000D    visibility hidden  x000D    width 0  x000D    height 0 x000D    x000D   lt div class  image-upload  gt  x000D     lt label for  file-input  gt  x000D       lt img src  https   placehold it 100 000000 ffffff text UPLOAD  style  pointer-events  none   gt  x000D     lt  label gt  x000D   x000D     lt input id  file-input  type  file    gt  x000D   lt  div gt  x000D   x000D   x000D    I have used visibility  hidden  width 0 instead of display  none for safari issue and added pointer-events  none in img tag to make it working if input file type tag is in FORM tag    Seems working for me in all major browsers   Hope it helps someone

User · Answer

This works really well for me    x000D   x000D   image-upload gt input   x000D    display  none  x000D    x000D   lt div class  image-upload  gt  x000D     lt label for  file-input  gt  x000D       lt img src  https   icon-library net images upload-photo-icon upload-photo-icon-21 jpg   gt  x000D     lt  label gt  x000D   x000D     lt input id  file-input  type  file    gt  x000D   lt  div gt  x000D   x000D   x000D    Basically the for attribute of the label makes it so that clicking the label is the same as clicking the specified input   Also  the display property set to none makes it so that the file input isn t rendered at all  hiding it nice and clean   Tested in Chrome but according to the web should work on all major browsers      EDIT  Added JSFiddle here  https   jsfiddle net c5s42vdz

User · Answer

its really simple you can try this       image id   click function            input id   click

User · Answer

The input itself is hidden with CSS visibility hidden   Then you can have whatever element you whish - anchor or image    when the anchor image is clicked  trigger a click on the hidden input field - the dialog box for selecting a file will appear    EDIT  Actually it works in Chrome and Safari  I just noticed that is not the case in FF4Beta

User · Answer

x000D   x000D          form input type  file     x000D            display  none  x000D            x000D   lt  DOCTYPE HTML PUBLIC  -  W3C  DTD HTML 4 0 Transitional  EN  gt  x000D   lt html gt  x000D   x000D   lt head gt  x000D     lt title gt Simple File Upload lt  title gt  x000D     lt meta name    content    gt  x000D   lt  head gt  x000D   x000D   lt body gt  x000D     lt form action  upload php  method  post  enctype  multipart form-data  gt  x000D      Select image to upload  x000D       lt label for  fileToUpload  gt  x000D         lt img src  http   s3 postimg org mjzvuzi5b uploader image png    gt  x000D       lt  label gt  x000D       lt input type  File  name  fileToUpload  id  fileToUpload  gt  x000D       lt input type  submit  value  Upload Image  name  submit  gt  x000D     lt  form gt  x000D   lt  body gt  x000D   x000D   lt  html gt  x000D   x000D   x000D    RUN SNIPPET or Just copy the above code and execute  You will get what you wanted  Very simple and effective without javascript  Enjoy

User · Answer

I have had lots of issues with hidden and not visible inputs over the past decade sometimes things are way simpler than we think   I have had a little wish with IE 5 6 7 8 and 9 for not supporting the opacity and thus the file input would cover the upload image however the following css code has resolved the issue   -ms-filter  progid DXImageTransform Microsoft Alpha Opacity 0    filter  alpha opacity 0       The following snipped is tested on chrome  IE 5 6 7 8 9 10 the only issue in IE 5 is that it does not support auto margin   Run the snippet simply copy and paste the CSS and HTML modify the size as you like    x000D   x000D   file-upload  x000D   height 100px  x000D   width 100px  x000D   margin 40px auto  x000D   border 1px solid  f0c0d0  x000D   border-radius 100px  x000D   overflow hidden  x000D   position relative  x000D    x000D   file-upload input  x000D   position absolute  x000D   height 400px  x000D   width 400px  x000D   left -200px  x000D   top -200px  x000D   background transparent  x000D   opacity 0  x000D   -ms-filter  progid DXImageTransform Microsoft Alpha Opacity 0    x000D   filter  alpha opacity 0     x000D    x000D   file-upload img  x000D   height 70px  x000D   width 70px  x000D   margin 15px  x000D    x000D   lt div class  file-upload  gt  x000D   lt  --place upload image icon first  -- gt  x000D   lt img src  https   i stack imgur com dy62M png    gt  x000D   lt  --place input file last  -- gt  x000D   lt input type  file  name  somename    gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Actually it can be done in pure css and it s pretty easy     HTML Code   lt label class  filebutton  gt  Browse For File   lt span gt  lt input type  file  id  myfile  name  myfile  gt  lt  span gt   lt  label gt    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 font size of the input to something large  which will increase the size of the  browse  button  It then takes some trial and error using the negative left   top properties to position the input browse button behind your label   When positioning the button  set the alpha to 1  When you ve finished set it back to 0  so you can see what you re doing    Make sure you test across browsers because they ll all render the input button a slightly different size

User · Answer

You can put an image instead  and do it like this   HTML    lt img src   images uploadButton png  id  upfile1  style  cursor pointer    gt   lt input type  file  id  file1   name  file1  style  display none    gt    JQuery       upfile1   click function              file1   trigger  click          CAVEAT  In IE9 and IE10 if you trigger the onclick in a file input via javascript the form gets flagged as  dangerous  and cannot be submmited with javascript  no sure if it can be submitted traditionaly

User · Answer

You can replace image automatically with newly selected image   lt div class  quot image-upload quot  gt         lt label for  quot file-input quot  gt           lt img id  quot previewImg quot  src  quot https   icon-library net images upload-photo-icon upload-photo-icon-21 jpg quot  style  quot width  100px  height  100px  quot    gt         lt  label gt          lt input id  quot file-input quot  type  quot file quot  onchange  quot previewFile this   quot  style  quot display  none  quot    gt       lt  div gt       lt script gt          function previewFile input               var file      quot input type file  quot   get 0  files 0                if file                 var reader   new FileReader                   reader onload   function                         quot  previewImg quot   attr  quot src quot   reader result                                  reader readAsDataURL file                                lt  script gt

User · Answer

A much better way than writing JS is to use native  and it turns to be lighter than what was suggested   lt label gt     lt img src  quot my-image png quot  gt     lt input type  quot file quot  name  quot myfile quot  style  quot display none quot  gt   lt  label gt   This way the label is automatically connected to the input that is hidden  Clicking on the label is like clicking on the field

User · Answer

I would use SWFUpload or Uploadify  They need Flash but do everything you want without troubles   Any  lt input type  file  gt  based workaround that tries to trigger the  open file  dialog by means other than clicking on the actual control could be removed from browsers for security reasons at any time   I think in the current versions of FF and IE  it is not possible any more to trigger that event programmatically

User · Answer

Working Code   just hide input part and do like this    lt div class  ImageUpload  gt      lt label for  FileInput  gt         lt img src        img Upload Panel png  style  width  18px  margin-top  -316px  margin-left  900px    gt      lt  label gt      lt input id  FileInput  type  file  onchange  readURL this  Picture    style  cursor  pointer   display  none   gt   lt  div gt

User · Answer

This is my method if i got your point  HTML   lt label for  FileInput  gt       lt 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    gt   lt  label gt   lt form action  upload php  gt       lt input type  file  id  FileInput  style  cursor  pointer   display  none   gt       lt input type  submit  id  Up  style  display  none     gt   lt  form gt    jQuery   lt script type  text javascript  gt           FileInput    change function                Up    click             lt  script gt

[css] Replace input type=file by an image

Examples related to css

Examples related to image

Examples related to file

Examples related to button

Examples related to input