图片上传

来源：互联网发布：小米扫地机器人知乎编辑：程序博客网时间：2024/06/06 20:07

1.html

<div class="work_bolck" data-id="{$cinfo5.id|default=0}" data-num='5' >
<div class="add_work_list" <if condition="$cinfo5"><else/>style="display: none;"</if>>
<div class="work_img_a" href="javascript:void(0)">
<img width="100%" height="100%" class='thumbimg' src="{$IMG}{$cinfo5.thumb} "/>
<a class="work_img_cover" href="javascript:void(0)" style="display: none;">
<img class="readd" src="http://img.jiangcdn.com/designer/reload_icon.png"/>
<span class="readd_span">点击重新上传</span>
</a>
</div>
<div class="add_work_info">
<p class='casename'>作品标题:{$cinfo5.name}</p>
<p class='htname'>作品类目:{$cinfo5.htype|get_ht_type}</p>
</div>
</div>
</div>

2 js

setFileUpload('shChuan',1); //图片上传
function setFileUpload(n,k){
var obj = $('.'+n);
var index = obj.attr('data-index');
var name = obj.attr('name');
var action = 'case_doupload'
obj.wrap("<form id='myupload"+index+"' action='/action/"+action+"/?name="+name+"' method='post' enctype='multipart/form-data'></form>");
obj.change(function(){ //图片上传触发条件
fileEmb(k); //图片上传 ajaxSubmit请求方法
});
}

function fileEmb(index,name){
$("#myupload"+index).ajaxSubmit({
dataType: 'json',//数据格式为json
data:'',
beforeSend: function() {
$('#loadding_flag').html('图片上传中');
if(!upflag)return false;
upflag=false;
var percentVal = '0%';//开始进度为0%
if(percentVal==100)percentVal=98;
$('.jdt_num').html(percentVal);//显示进度为0%
$(".pic_error").hide().html('');
$("#savecase_form input[name='caseshow']").val(''); //上传作品的隐藏表单元素 input
$('.lk_pic').hide(); //隐藏点击查看大图

},
uploadProgress: function(event, position, total, percentComplete) {
percentComplete = percentComplete>=100?99:percentComplete;
var percentVal = percentComplete + '%';//获得进度
var width = percentComplete *170/100;
$('.jdt_cover').css('width',width+'px');
$('.jdt_num').html(percentVal);

if(percentComplete>=99){
$('.detailPic').html('<i class="loading_over">图片正进行缩略，请稍后</i>');
}
else {
$('.detailPic').html('<i class="loading_over">上传中，请稍后</i>');
}
//$('#uppic'+index).find('.percentVal').html(percentVal+'<br>上传中，请稍候');//显示进度为0%
},
success: function(data) {//成功
$('#loadding_flag').html('图片上传');
upflag=true;
if(data.status){
$('.jdt_cover').css('width','170px');
$('.jdt_num').html('100%');
$('.detailPic').html('<img id="myForm_img" width="170px" height="186px" src="'+data.path1+'"/>');
$("#caseshow").val(data.path);
//$("#thumb_height").val(data.thumb_height);
$('.lk_pic').attr("href",data.path0).show(); //点击查看大图
}else{
// $(".pic_error").show();
// $(".pic_error").html(data.info);
alert(data.info);
}
},
error:function(xhr){//上传失败
$('#loadding_flag').html('图片上传');
upflag=true;
}
});
}

3.插件 jquery.form.js

0 0