Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • How to Create Cross-Browser Custom Upload Button with Jquery

    • 0
    • 2
    • 1
    • 1
    • 0
    • 0
    • 0
    • 0
    • 94
    Comment on it

    Hello Reader's
    In this article I will guide you to create Cross-Browser Custom Upload Button With JQuery
    If you facing any problem for upload button use this code.
    Here is the HTML

    <div class="Container">
            <label>Upload Photo:</label>
            <input class="fileinput" type="file" name="data[User][image][]" style="display:none">
            <span class="button upload">Browse</span>
            <span class="filename"></span>
        </div>
    


    Here is the CSS

    .Container{width: 608px;position: absolute;margin-bottom:10px;
                top: 30px;
                margin-left: 15px;}
            .Container label{position: absolute;bottom: 35px;color: #356332;}
            .Container .upload {
                background: #3D7D43;
                color: #fff;
                padding: 7px 10px;
                border-radius: 5px;
                cursor: pointer;
                left: 0px;
                top: 0px;
                display:inline-block;
            }
            .Container .upload:hover {
                background: #000;
            }
            .Container .filename {
                background: #FCF9F2;
                border: 1px solid #b0c2b2; 
                overflow: hidden;
                display: block;
                font-size: 14px;
                font-style: italic;
                left: 80px;
                padding: 6px 7px;
                position: absolute;
                top: 0px;
                width: 200px;
                box-shadow: 2px 2px 2px 0 #D5D4D0 inset;
                color: #ff0000;
                height: 20px;
            }
    


    Here is the JS

    $( function() {
                $('body').on('click' ,'.upload', function(){
                $(this).prev('.fileinput').click();
    
                $(this).prev('.fileinput').change(function() {
                    $(this).nextAll('.filename').eq(0).html(
                        $(this).val().substring(
                            $(this).val().lastIndexOf('\\')+1));
                    });
                });
            });
    

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: