图片上传

Myth丶恋晨 2022-09-26 02:41 37阅读 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>>  
<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