file input style is not same for all browsers....some browsers (eg...IE) will show input text field and some browsers wont show the  text filed (eg..Chrome)
So we need proper style for file input for our websites.

Concept of styling :

1. Hide input file type and display upload file button
2. When User clicks on upload file button , trigger click on input file type programmitically using jquery
3. Display the file name in the "display" element. Extract file name from the path and display it.


design html elements like below

<div style="padding:10px">
 <input style="display:none" type="file" id="typefile"/>
 <span class="classname" id="upload">upload file</span>
 <span id="display"></span>
</div>

write script as below

$( function() {

    $('#upload').click(function(){
       $("#typefile").click();
    });

    $("#typefile").change(function(){
               
    $("#display").html(
       $("#typefile").val().substring(
           $("#typefile").val().lastIndexOf('\\')+1));
    });
   
});

1 comment:

Blogroll

Follow this blog by Email

Popular Posts