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));
    });
   
});

2 comments:

  1. لدينا أقوى المبيدات الحشرية المستوردة ، والتي تعمل على القضاء على الحشرات بمجرد أن تكون آمنة للصحة ولا تسبب أي ضرر للبشر.

    شركة مكافحة الحشرات شرق الدمام:
    تقدم لك شركة مكافحة الحشرات في الدمام خدمة مكافحة الحشرات.شركة النجوم لمكافحة الحشرات
    شركة رش مبيدات بجدة
    شركة مكافحة الفئران بجدة
    شركة مكافحة النمل الابيض بجدة
    شركة مكافحة حشرات بجدة

    ReplyDelete

Blogroll

Follow this blog by Email

Popular Posts