jquery图片上传

html代码

<div class="form-group">
                        <label class="col-sm-3 control-label no-padding-right" for="form-field-1"> 视频 : </label>
                        <div class="col-sm-9"> 
                            <input type="hidden" name="videourl" id='videourl' > 
                            <input id="fileupload" type="file" name="carouselvideo" multiple> 
                            <div class="progress"> 
                                <span class="bar"></span><span class="percent">0%</span>                            
                            </div> 
                            <span class="help-inline col-xs-12 col-sm-7">
                                <span class="middle" style='color:red' id="isSuccess"></span>
                            </span>                             
                        </div> 
</div>  

js代码
···
var bar = $('.bar');
var percent = $('.percent');
var showimg = $('#showimg');
var progress = $(".progress");
var files = $(".files");
var btn = $(".btn span");
$("#fileupload").wrap("<form id='myupload' action='{:url('User/uploadAvatar')}' method='post' enctype='multipart/form-data'></form>");
$("#fileupload").change(function(){ //选择文件
$("#isSuccess").html('');
$("#myupload").ajaxSubmit({
dataType: 'json', //数据格式为json
beforeSend: function() { //开始上传
showimg.empty(); //清空显示的图片
progress.show(); //显示进度条
var percentVal = '0%'; //开始进度为0%
bar.width(percentVal); //进度条的宽度
percent.html(percentVal); //显示进度为0%
btn.html("上传中..."); //上传按钮显示上传中
},
uploadProgress: function(event, position, total, percentComplete) {
var percentVal = percentComplete + '%'; //获得进度
bar.width(percentVal); //上传进度条宽度变宽
percent.html(percentVal); //显示上传进度百分比
},
success: function(data) { //成功
console.log(data);
$('.headerImg .photoCon img').attr('src',data.data.longurl);
if(data.status =='success'){
$("#hdshorturl").val(data.data.shorturl);
$("#fileupload").val('');
layer.msg('头像上传成功');
}else{
layer.msg('头像上传成功');
}
},
error:function(xhr){ //上传失败
btn.html("上传失败");
bar.width('0');
files.html(xhr.responseText); //返回失败信息
}
});
});
···