图片上传

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