上传多个图片,并存储在session中,并且可以删除

$("#imgFileren").change(function(){
//alert($(this));
ajaxFileUploadTwo($(this));
});
var imgCount = 0;
var imgList={}
function ajaxFileUploadTwo(select) {
var fileId = select.attr("id");
$.ajaxFileUpload({
url : 'FrmTechnician.upload', // 用于文件上传的服务器端请求地址
secureuri : false, // 是否需要安全协议,一般设置为false
fileElementId : fileId, // 文件上传域的ID
dataType : 'json', // 返回值类型 一般设置为json
success : function(data, status) // 服务器成功响应处理函数
{

if(sessionStorage.getItem("imgCount")){
console.log(parseInt(sessionStorage.getItem("imgCount")));
imgCount= parseInt(sessionStorage.getItem("imgCount"));
}
var html='<div class="fileAddBox fl mr_10 mb_10">'+
'<img src='+data.imgUrl+' class="cunfangImg" id="fileImg' + (imgCount ++) + '">'+
'<span class="removeButTwo" style="display:block"></span>'
+'<input type="hidden" name="renzhenpic" value='+data.imgUrl+'>'
+'</div>';
$("#renzhengming").before(html);
if(sessionStorage.getItem("keys")){
var strs =sessionStorage.getItem("keys").split(",");
for(var i=0;i<strs.length;i++){
delete imgList[strs[i]];
}
/* imgList.remove(sessionStorage.getItem("keys")); */
}
imgList["fileImg"+ imgCount]=data.imgUrl;
console.log(imgList);
for(var key in imgList){    
   console.log("属性:" + key + ",值:"+ imgList[key]);   
   sessionStorage.setItem(key,imgList[key]);
}  
//sessionStorage.setItem("imgListId",imgList);
sessionStorage.setItem("imgCount",imgCount);
showListImg();
$("#imgFileren").change(function(){
ajaxFileUploadTwo($(this));
});
},
error : function(data, status, e)// 服务器响应失败处理函数
{
console.log(e);
}
})
   return false;
}

});


var newImg=[];
function showListImg(){
if(sessionStorage.getItem("imgCount")){
var imgCount=sessionStorage.getItem("imgCount");
//alert(imgCount);
$("#renzhengming").siblings().remove();
for(var i=1;i<=imgCount;i++){

if(sessionStorage.getItem("fileImg"+i)){
alert(sessionStorage.getItem("fileImg"+i));
console.log("========="+sessionStorage.getItem("fileImg"+i));
console.log(1231);
var html="";
html='<div class="fileAddBox fl mr_10 mb_10">'
+'<img src='+sessionStorage.getItem("fileImg"+i)+' class="cunfangImg" id="' + "fileImg"+i + '">'
+'<span class="removeButTwo" style="display:block;"></span>'
+'<input type="hidden" name="renzhenpic" value='+sessionStorage.getItem("fileImg"+i)+'>'
+'</div>';
$("#renzhengming").before(html);
}
}
} ;
var keys=new Array();
$('body').on('click','.removeButTwo',function(){
sessionStorage.removeItem($(this).siblings('.cunfangImg').attr('id'));
keys.push($(this).siblings('.cunfangImg').attr('id'));
sessionStorage.setItem("keys",keys);
$(this).parent('.fileAddBox').remove();
//console.log('imgList'+imgList);
})

}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值