王新阳

<div class="layui-form-item">
	<label class="layui-form-label">图片上传</label>
	<div class="layui-input-block">
		<button type="button" class="layui-btn layui-btn-primary layui-border-blue" id="js-btn-upload"><i class="layui-icon layui-icon-upload"></i> 上传图片</button>
	</div>
</div>
<div class="layui-form-item">
	<ul id="upload-list" class="upload-list"></ul>
</div>

<script type="text/html" id="upload-tpl">
	<li id="js-image-{{ d.index }}">
		<div class="layui-progress" lay-filter="progress-{{ d.index }}"><div class="layui-progress-bar" lay-percent=""></div></div>
		<em><img src="{{ d.url }}"><a class="layui-btn layui-btn-xs layui-bg-red js-reupload">重新上传</a></em>
		<div class="layui-btn-group">
			<a class="layui-btn layui-btn-primary layui-btn-sm layui-border-blue js-left"><i class="layui-icon layui-icon-left"></i></a>
			<a class="layui-btn layui-btn-primary layui-btn-sm layui-border-red js-delete"><i class="layui-icon layui-icon-delete"></i></a>
			<a class="layui-btn layui-btn-primary layui-btn-sm layui-border-blue js-right"><i class="layui-icon layui-icon-right"></i></a>
		</div>
		<input type="hidden" name="imglist[]">
	</li>
</script>

<script>
//上传图片
var uploadInst = layui.upload.render({
	elem: '#js-btn-upload', //绑定元素
	elemList: $('#upload-list'), // 列表元素对象
	url: '<?=site_url('kindeditor/uploadjson?type=image&dir=product')?>',
	acceptMime: 'image/jpeg, image/png',
	exts: 'jpg|png',
	size: 1024,
	field: 'imgFile',
	multiple: true,
	number: 6,
	auto: false,
	choose: function(obj){
		uploadInst.config.elem.next()[0].value = ''; 
		var pics=this.elemList.find('li').length;
		if(pics>=this.number || pics+Object.keys(obj.getChooseFiles()).length>this.number){
			layer.msg('最多上传6张图片');
			return false;
		}
		// 读取本地文件
		var that = this;
		obj.preview(function(index, file, result){
			var li=$(laytpl($('#upload-tpl').html()).render({index:index,url:result}));
			li.find('.layui-progress').show();
			li.find('.js-reupload').on('click', function(){
				obj.upload(index, file);
				$(this).hide();
				element.progress('progress-'+ index, '0%');
			});
			that.elemList.append(li);
			element.render('progress'); // 渲染新加的进度条组件
			obj.upload(index, file);
		});
	},
	done: function(res, index, upload){ // 成功的回调
		var that = this;
		 if(res.error == 0){ // 上传成功
			var li = that.elemList.find('li#js-image-'+ index)
			li.find('.layui-progress').remove();
			li.find('input').val(res.url);
			return;
		}
		this.error(index, upload);
	},
	error: function(index, upload){ // 错误回调
		var that = this;
		var li = that.elemList.find('li#js-image-'+ index);
		 //显示重传
		li.find('.js-reupload').show();
		layer.msg('上传失败',{icon:5});
	},
	progress: function(n, elem, e, index){ // 注意：index 参数为 layui 2.6.6 新增
		element.progress('progress-'+ index, n + '%'); // 执行进度条。n 即为返回的进度百分比
	}
});
</script>