customize the file button for image upload

Question

I am placed a button for upload image files.I want to customize that button, i want to add more than one image file ,what is the logic to achive.

<input type="file" />,this is rendering a choose button with a text saying `no files choosen` in the same line.

Is it possible to customize the text "no files choosen"below the choose button.Meanwile i wise to keep an camera image before the no files choosen text.

How to perform this to improve my site.

Thanks

The similar post http://stackoverflow.com/questions/6461252/custom-upload-button — zavg, Apr 18 '13 at 10:38

Sébastien Garmier · Accepted Answer · 2013-04-18T11:06:47.630

48

You can hide the input by placing it into a div which is height:0px and overwflow:hidden. THen you add a button or an other html element which you can style as you want. In the onclick event you get the input field using javascript or jQuery and click it:

<div style="height:0px;overflow:hidden">
   <input type="file" id="fileInput" name="fileInput" />
</div>
<button type="button" onclick="chooseFile();">choose file</button>

<script>
   function chooseFile() {
      $("#fileInput").click();
   }
</script>

Now the input is hidden, but you can style the button as you want, it will always open the file input on click.

If you don't want to use jQuery replace the script tag with this script tag:

<script>
   function chooseFile() {
      document.getElementById("fileInput").click();
   }
</script>

edited Apr 18 '13 at 11:06

answered Apr 18 '13 at 10:48

Sébastien Garmier

1,263
9
16

Hi sir,i checked it with jsfiddle,it is not taking the input file.choose file button is not doing any thing – Apr 18 '13 at 10:54
Yes, because you have to add links to the jQuery js-files. – Sébastien Garmier Apr 18 '13 at 11:01
And you must put the javascript in a script tag into the html panel, but I don't know why... On try it editor from w3schools it forks fine. – Sébastien Garmier Apr 18 '13 at 11:08
Perfect, working like a charm. – yuva Jun 19 '15 at 06:46
Brilliant! this solution worked... – MizAkita Jul 29 '15 at 16:31
@SébastienGarmier, How to display the file name as well? – Naren Verma Sep 11 '18 at 04:40

score 7 · Answer 2 · answered Apr 18 '13 at 10:37

7

Try this manipulated solution. (I tried it today for one of my project :) )

HTML

  <div class="choose_file">
        <span>Choose File</span>
        <input name="Select File" type="file" />
    </div>

CSS

.choose_file{
    position:relative;
    display:inline-block;    
    border-radius:8px;
    border:#ebebeb solid 1px;
    width:250px; 
    padding: 4px 6px 4px 8px;
    font: normal 14px Myriad Pro, Verdana, Geneva, sans-serif;
    color: #7f7f7f;
    margin-top: 2px;
    background:white
}
.choose_file input[type="file"]{
    -webkit-appearance:none; 
    position:absolute;
    top:0; left:0;
    opacity:0; 
}

DEMO

answered Apr 18 '13 at 10:37

Sowmya

26,684
21
96
136

It does not show the selected file name – Sergey Makridenkov Aug 27 '14 at 13:25
1

Its worked for me Thanks i got this point `input[type="file"]{ -webkit-appearance:none; position:absolute; top:0; left:0; opacity:0; }` – core114 Mar 11 '19 at 11:24
1

@core114 Glad it worked. – Sowmya Mar 13 '19 at 09:42

score 1 · Answer 3 · answered Aug 15 '15 at 19:29

You can customize it using only CSS. Go through the link below.

HTML

<label class="btn-upload">
   <input type="file" name="fileupload">
   <button class="btn">Browse</button>
</label>

.btn-upload {
    position: relative;
    overflow: hidden;
    display: inline-block;
}
.btn-upload input[type=file] {
    position: absolute;
    opacity: 0;
    z-index: 0;
    max-width: 100%;
    height: 100%;
    display: block;
}
.btn-upload .btn{
    padding: 8px 20px;
    background: #337ab7;
    border: 1px solid #2e6da4;
    color: #fff;
    border: 0;
}
.btn-upload:hover .btn{
    padding: 8px 20px;
    background: #2e6da4;
    color: #fff;
    border: 0;
}

http://imdebasispanda.blogspot.in/2015/08/custom-upload-button-using-css.html

score 0 · Answer 4 · answered Feb 12 '17 at 15:46

0

    <body>

    <style>
   .image{
  position:relative;
   display:inline-block;    
     width:3%; 
   padding: 0%;
    }
.image input[type="file"]{
-webkit-appearance:none; 
position:absolute;
    top:0; left:0;
    opacity:0; 
     }
   </style>

  <div class="image">
    <span><img src='admin/ico/fms.ico' class "image"></span>
    <input name="image" type="file" />
  </div>
</body>

answered Feb 12 '17 at 15:46

J.Mbai

1

Please add some text _how_ this answers the question. – Zeta Feb 12 '17 at 16:50
this code works better when you want to use an image as an upload button. just replace my image with yours and it will work – J.Mbai Feb 14 '17 at 17:10
Please [edit] additional information into your answer. Comments can be deleted, and their contents can get lost. – Zeta Feb 14 '17 at 20:32

customize the file button for image upload

4 Answers4

Linked