Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • How to use upload files with JQuery

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 166
    Comment on it

    Here is the example for *How to use upload files with JQuery. *
    If you having trouble with such issues, then use the below code.

    Here is the HTML

    <div class="flie-btn clearfix">
         <input class="fileinput" type="file" name="data[User][image][]" style="display:none">
         <span class="button upload">Upload File:</span>
         <span class="filename"></span>
    </div>
    

    Here is the css

    .flie-btn {
        width:110px;
        background:#ea6c18;
        cursor:pointer;
        position:relative;
    }
    
    .flie-btn .upload {
        display:block;
        padding:14px 9px;
        color:#454545;
    }
    
    .flie-btn .filename {
        background: #FCF9F2;
        overflow: hidden;
        display: block;
        font-size: 15px;
        left: 110px;
        position: absolute;
        top: 0px;
        width: 300px;
        height:18px;
        padding:13px 10px;
    }
    
    .flie-btn.clearfix > label {
        padding:12px 11px;
     }
    

    Here is the Code (JQuery)

    $('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: