LAYUI2.0上传多张图片增加 左右移动及删除功能，同时支持单张上传。

http://fly.layui.com/jie/12987/

非常高兴的成为了2.0第一个精华贴，所以我继续将THINKPHP3.2.3后端上传代码同时提供出来。

今天试用了一下新版，我比较关注的是多图上传功能，感叹这次升级上传真的很强大。感谢@闲心

今天将上传示例中的第二个多图上传给优化一下，将左右切换及删除功能加上。

本着奉献的精神，现在将代码分享给朋友们。
HTML部分：

<button type="button" class="layui-btn layui-btn-primary" id="upload_img">上传图片</button>
<div id="upload_img_list"> </div>

CSS部分：

#upload_img_list {
	margin: 10px 0 0 0
}
#upload_img_list dd {
	position: relative;
	margin: 0 10px 10px 0;
	float: left
}
#upload_img_list .operate {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 1
}
#upload_img_list .operate i {
	cursor: pointer;
	background: #2F4056;
	padding: 2px;
	line-height: 15px;
	text-align: center;
	color: #fff;
	margin-left: 1px;
	float: left;
	filter: alpha(opacity=80);
	-moz-opacity: .8;
	-khtml-opacity: .8;
	opacity: .8
}
#upload_img_list dd .img {
	max-height: 150px;
	max-width: 500px
}

JS部分：

/*
上传参数设定
*/
var upurl = "/upload/upimg";//上传图片地址
var duotu = true;//是否为多图上传true false

/*
上传图片
*/
layui.use('upload', function() {
	upload = layui.upload;
	upload.render({
		elem: '#upload_img',
		url: upurl,
		multiple: duotu,
		before: function(obj) {
			layer.msg('图片上传中...', {
				icon: 16,
				shade: 0.01,
				time: 0
			})
		},
		done: function(res) {
			layer.close(layer.msg());//关闭上传提示窗口
			if (duotu == true) {//调用多图上传方法,其中res.imgid为后台返回的一个随机数字
			$('#upload_img_list').append('<dd class="item_img" id="' + res.imgid + '"><div class="operate"><i class="toleft layui-icon"></i><i class="toright layui-icon"></i><i onclick=UPLOAD_IMG_DEL("' + res.imgid + '") class="close layui-icon"></i></div><img src="' + res.tolink + '" class="img" ><input type="hidden" name="dzd_img[]" value="' + res.tolink + '" /></dd>');
			}else{//调用单图上传方法,其中res.imgid为后台返回的一个随机数字
				$('#upload_img_list').html('<dd class="item_img" id="' + res.imgid + '"><div class="operate"><i onclick=UPLOAD_IMG_DEL("' + res.imgid + '") class="close layui-icon"></i></div><img src="' + res.tolink + '" class="img" ><input type="hidden" name="dzd_img" value="' + res.tolink + '" /></dd>');
			}
		}
	})
});


/*
删除上传图片
*/
function UPLOAD_IMG_DEL(divs) {
	$("#"+divs).remove();
}

/*
多图上传变换左右位置
*/
$(".toleft").live("click", function() {
	var item = $(this).parent().parent(".item_img");
	var item_left = item.prev(".item_img");
	if ($("#upload_img_list").children(".item_img").length >= 2) {
		if (item_left.length == 0) {
			item.insertAfter($("#upload_img_list").children(".item_img:last"))
		} else {
			item.insertBefore(item_left)
		}
	}
});
$(".toright").live("click", function() {
	var item = $(this).parent().parent(".item_img");
	var item_right = item.next(".item_img");
	if ($("#upload_img_list").children(".item_img").length >= 2) {
		if (item_right.length == 0) {
			item.insertBefore($("#upload_img_list").children(".item_img:first"))
		} else {
			item.insertAfter(item_right)
		}
	}
});

THINKPHP3.2.3上传代码:

这个放到公用的控制器里，做为JOSN返回的通用方法，当然你也可以不用这个，在上传代码里直接返回。
function DZD_AJAX_MSG($imgid,$tolink){
		$ajax_msg['imgid']=$imgid;    //提示信息
		$ajax_msg['tolink']=$tolink;  //跳转链接
		echo json_encode($ajax_msg);  //返回结果，json
}



上传代码
    public function upimg(){
	    // 上传文件
		$upload = new \Think\Upload();       // 实例化上传类
		$upload->maxSize   =     3145728 ;   // 设置附件上传大小
		$upload->exts      =     array('jpg', 'png');// 设置附件上传类型
		$upload->rootPath  =     './Uploads/'; // 设置附件上传根目录
		$upload->savePath  =     '/img/'; // 设置附件上传（子）目录
		$upload->subName   =      array('date','Ymd');   // 设置附件上传子目录按日期生成
		$upload->replace  =      true;  //同名覆盖
		
		$info    =   $upload->upload();
		if(!$info) {
			$this->DZD_AJAX_MSG($upload->getError(),"");
			exit;
		}else{
			foreach($info as $file){
				 $dzd_img=$file['savepath'].$file['savename'];
				 $file_path="./Uploads".$file['savepath'].$file['savename'];
			}
		$imgid=str_replace(".","",$file['savename']);   //做为删除容器ID
		$this->DZD_AJAX_MSG($imgid,"/Uploads".$file['savepath'].$file['savename']);
		
		
		}
    }

多图上传效果：


单图上传效果：