Layui多图片上传前台遍历显示与删除操作

Layui文件上传以及图片回显

var uploadInst = upload.render({
			elem: '#pic',
			//绑定的元素
			url: 'jjsk/curriculum/uploadCurriculumPic?access_token=' + layui.data('layuiAdmin').access_token,
			auto: true,
			//是否自动上传
			accept: "images",
			//指定允许上传的文件类型
			multiple: true,
			//支持多文件上传
			/* size: 1024 * 2, */
			done: function(res, index, upload) { //假设code=0代表上传成功
				if (isObjNotEmpty(res.data)) {
					//上传成功后返回的文件路径
					var fileurl = res.data[0].fileurl;
					//原内容
					var old_url = $("#pic_src").val();
					//判断是否有原内容
					if(old_url.length>0){
			   			$("#pic_src").val( old_url + "," + fileurl);
			   		}else{
			   			$("#pic_src").val(fileurl);
			   		}
					$("#icon_data_div").empty();
					//获取input中存入的地址
					var type_pic_url = $("#pic_src").val();
			   		var strs = new Array();
			   		strs = type_pic_url.split(",");
					//图片回显
			   		var html = "";
			   		for(var i=0;i<strs.length;i++){
			   			html += "<div style='float:left;margin-right:10px;'><img alt='图片不存在' height='50' width='50' src='"+strs[i]+"'><span onclick=delFile(this,'"+strs[i]+"')>删除</span></div>";
			   		}
		   			$("#icon_data_div").html(html);
				}
			}
		});

删除上传图片

function delFile(obj,file){
	//obj为当前对象,file为该文件路径
	$(obj).siblings().remove();
	$(obj).remove();
	//获取全部文件路径
    var files = $("#pic_src").val();
    //分割
    var fileArray = files.split(",");
    //得到要删除文件路径在全部文件路径中的定位
	var index = fileArray.indexOf(file);
	if (index > -1) {
		//分割字符串
		fileArray.splice(index, 1);
	}
	
	$("#pic_src").val(fileArray);
	
	//后台请求数据
	data={
		xFileName:file,
		access_token:layui.data('layuiAdmin').access_token
	};    	  
	$.post('jjsk/curriculum/delCurriculumPic',data,function(json){
		try {
			n=eval('('+json+')');
		} catch (e) {}
		if(json.success){    		  				
			parent.layer.msg("删除成功");
		}else{
			layer.msg(json.msg);
		}
	});
}

删除文件后台

@RequestMapping("delCurriculumPic")
	@ResponseBody
	public LayuiJson delCurriculumPic(HttpServletRequest request,String xFileName){
		LayuiJson json = new LayuiJson();
		//获得项目发布路径
		String realPath = request.getServletContext().getRealPath("/");
		String fileUrl = realPath + xFileName;
		boolean b1 = FileUtils.lkh_delFile(fileUrl);
		if (b1) {
			json.setSuccess(true);
			json.setMsg("删除成功!");
		}else {
			json.setSuccess(false);
			json.setMsg("删除失败!");
		}
		return json;
	}
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值