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)