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)