How to style input type file using css

Question

I have an input field which is in the type "file".

     <input type="text" name="fake_section" class="fake_section"><button class="fake_section">Choose Photo</button>
     <input type="file" style="display:none;" name="file" id="file" value="Choose Photo" accept="image/png,image/jpeg" /> 
     <input type="submit" name="submit" value="Submit" />

And i use the following css

input[type="file"] {
    width:50%;
    height:25px;
    border-radius:2px;
    display:inline-block;
    border:thin solid #ddd;   
}

i got my output like following

enter image description here But actually i want the output like, Another problem is that i only want to choose the "jpeg and png" image files, but this input field accept all the file type. And i try this in both the browsers Firefox and Chrome

neel · Accepted Answer · 2014-01-17 06:37:20Z

2

<input type="text" name="fake_section" class="fake_section">
    <input type="button" class="fake_section" value="Choose Photo"/>
<input type="file" style="display:none;" name="file" id="file" value="Choose Photo" accept="image/png,image/jpeg" /> 
<input type="submit" name="submit" value="Submit" />

JS

$('.fake_section').click(function(e){
    e.preventDefault();

    $('#file').trigger('click');    
});

$('#file').change(function(e){
    var filename = $(this).val();
    var ext = filename.split('.').pop().toLowerCase();

    if( $.inArray( ext, ['gif','jpg','jpeg'] ) == -1 ){
        alert('not valid!');
    }
    else{
        $('input[name="fake_section"]').val(filename);
    }
});

Try like this

http://jsfiddle.net/jogesh_pi/5WcFj/2/

edited Jan 17, 2014 at 6:37

neel

5,31312 gold badges50 silver badges67 bronze badges

answered Jan 17, 2014 at 5:25

jogesh_pi

9,7745 gold badges40 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

neel Over a year ago

but here no files are selected into texbox??

neel Over a year ago

But i have a question can i post the file from a form to a model by using this way

jogesh_pi Over a year ago

@Parvathiiiii yes ofcause, because i just hide the filetype, form definitely pass the file type informations.

neel Over a year ago

but in my case when click to choose the photo it is directly go to submit button without selecting photo?!!

jogesh_pi Over a year ago

let us continue this discussion in chat

|

Amit · Accepted Answer · 2014-01-17 05:25:06Z

1

Try this to validate the file

var ext = $('#file').val().split('.').pop().toLowerCase();
if($.inArray(ext, ['gif','png','jpg','jpeg']) == -1) {
   alert('invalid extension!');
}

answered Jan 17, 2014 at 5:25

Amit

15.4k8 gold badges49 silver badges69 bronze badges

Comments

Mr Lister · Accepted Answer · 2014-01-17 07:28:38Z

To answer the second question, you can choose which files appear in the open box by using the accept attribute on the input.

See the official W3C reference.

Note, however, that the page suggests you can choose png and jpeg files by using accept="image/png,image/jpeg", and that will not work in all browsers. Only in Chrome actually. So it's better to put accept="image/*" (for all image files) which does work in the majority of browsers.

Fiddle here.

You also had troubles with the submit button, but that was caused by the fact that <input type="button"> is not the same as <button>. One doesn't submit, the other does.
Here is a quick list for reference.

<input type="submit"> submits
<input type="button"> doesn't submit
<button type="submit"> submits
<button type="button"> doesn't submit
<button> submits

Collectives™ on Stack Overflow

How to style input type file using css

3 Answers 3

7 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related