使用layui上传的几个要求

1.能够限制数量

2.使用预加载的priview模式

3.使用删除能够重新上传。

前台html

<?php 
$pics = isset($detail['pics']) ? $detail['pics'] : '';
$arr_pics = explode("|", $pics); 
?>
<input type="hidden" name="pics" value="<?php echo isset($detail['pics']) ? $detail['pics'] : '' ?>">
<div class="layui-upload">
	<p class="pic_up">
		<button type="button" class="layui-btn layui-btn-sm choose" id="upload_pics">选择</button>最多上传5张
		<button type="button" class="layui-btn" id="up">上传</button></p>
	<blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
	预览图：
	<div class="layui-upload-list" id="demo2">
		<?php if ( count($arr_pics) ): ?>
		<?php foreach ($arr_pics as $k => $v): ?>
		<div class="item-pic"><img src="<?php echo $v; ?>" class="layui-upload-img"><i class="layui-icon pos">&#x1006;</i></div>	
		<?php endforeach ?>	
		<?php endif ?>
		
	</div>
	</blockquote>
</div>

js部分

layui.use(['form','upload','layer'], function(){
	$ = layui.jquery;
  	var form = layui.form
  	,layer = layui.layer;
  	var element = layui.element;
	var str_data_src = "";
	var upload = layui.upload;
	var limit_upload_num = 3;
	var files;

js删除图片

	$("#demo2").on('click','.pos',function(){
		data_src = [];
		var _index = $(this).attr('data-index');
		delete(files[_index]);
		console.log("delete over index");
		console.log(files);

		$(this).parent('.item-pic').remove();
		$(".layui-upload-img").each(function(){ 
			if( $(this).hasClass("new") )
			{
				console.log('not uploaded');
			}
			else
			{
				data_src.push($(this).attr('src'));
			}
		  	
		})
		str_data_src = data_src.join("|");

		$("[name='pics']").val(str_data_src);
	})

主体js部分

	var upload = layui.upload;
   
	//执行实例
	var uploadInst2 = upload.render({
	   	elem: '#upload_pics'
	   	,url: '<?php echo INDEX_PHP ?>/upload/layui_upload_pic?type=shop&num=' + upload_num //此处配置你自己的上传接口即可
	   	,multiple: true
	   	,size: 1000 //最大允许上传的文件大小
	   	,auto: false
	   	,bindAction: '#up' 
	   	,choose: function(obj){
		    files = obj.pushFile();
		    var num = $(".item-pic").length;
	   		console.log("time-pic num :" + num);
		    obj.preview(function(index, file, result){
		    	console.log('choose index:' + index);
		    	if( num > (limit_upload_num-1) )
		   		{
		   			layer.alert('当前仅允许最多上传'+limit_upload_num+'张图片', {icon: 5});
		   			delete files[index];
		   			console.log('delete index:' + index);
		   			return;
		   		}
				$('#demo2').append('<div class="item-pic"><img src="'+ result + '" class="layui-upload-img sn' + index + ' new"><i class="layui-icon pos" data-index="'+ index +'">&#x1006;</i></div>');
		    });
		    console.log('choose获得当前文件队列');
		    console.log(files);

		    
		 }
	   	,before: function(obj){
	   		console.log('before获得当前文件队列');
	   		// var files = obj.pushFile();
   			console.log(files);
	   		console.log("before files length:" + files.length);
	   		if ( files.length > 0 ) {
	   			layer.load(); //上传loading
	   		}else{
	   			// layer.alert('请不要重复上传相同的文件或图片', {icon: 5});
	   			console.log('before:请不要重复上传相同的文件或图片');
	   		}
	   		console.log("before:获取当前已经上传的文件arr");
	   		// console.log(arrPicsIndex)
	   		// for (var index in arrPicsIndex) {
	   		// 	var _index = arrPicsIndex[index];
	   		// 	delete files[_index];
	   		// };

	   	
	
	   		
	   		
	   		
	   	}
	   	,allDone: function(obj){ //当文件全部被提交后，才触发
		    console.log(obj.total); //得到总文件数
		    console.log(obj.successful); //请求成功的文件数
		    console.log(obj.aborted); //请求失败的文件数
		    console.log('alldone');

		    if( obj.aborted == 0 )
		    {
		    	// layer.msg("上传成功",{icon:5,anim:6,time:1000});
		    	console.log('alldone:上传成功');
		    	console.log('alldone:完成之后的队列');
		    	console.log(files);
		    	for (var index in files) {
		   			delete files[index];
		   		};

		    }
		    else
		    {
		    	// layer.alert("上传失败",{icon:5,anim:6,time:1000});
		    }
		 }

	   	,done: function(res, index, upload){ 
	      console.log('done单程上传序号:' + index);
	      layer.closeAll('loading'); //关闭loading
	      if ( res.code == 200 ){
	      	// arrPicsIndex.push(index);
	      	$(".sn" + index).attr('src',res.data.src);
	      	$(".sn" + index).removeClass('new');
	        var data_src = [];
	        $(".layui-upload-img").each(function(){
	          data_src.push($(this).attr('src'));
	        })
	        str_data_src = data_src.join("|");
	        $("[name='pics']").val(str_data_src);
	        console.log('done ok');


	      }else{

	        layer.msg(res.error,{icon:5,anim:6,time:1000});

	      }
	    }
        ,error: function(index, upload){
          layer.closeAll('loading'); 
          layer.alert('上传失败，请查看上传网络情况', {icon: 5});
        }
	});

alldone已经使用了，所以可以考虑不使用done，但是为了后续可能会出现没有上传成功的，那么done独立去处理就显得很有必要了。