图片上传-蒲公英云

图片上传

Myth丶恋晨 2022-09-26 02:41 109阅读 0赞

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>>

作品标题:{$cinfo5.name}

作品类目:{$cinfo5.htype|get_ht_type}

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(“

“);
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(‘图片正进行缩略，请稍后‘);
}
else {
$(‘.detailPic’).html(‘上传中，请稍后‘);
}
//$(‘#uppic’+index).find(‘.percentVal’).html(percentVal+’
上传中，请稍候’);//显示进度为0%
},
success: function(data) { //成功
$(‘#loadding_flag’).html(‘图片上传’);
upflag=true;
if(data.status){
$(‘.jdt_cover’).css(‘width’,’170px’);
$(‘.jdt_num’).html(‘100%’);
$(‘.detailPic’).html(‘‘);
$(“#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;
}
});
}