使用layui上传多文件

使用layui上传多文件

HTML部分

		<div class="layui-form-item" >
            <label class="layui-form-label">上传多文件</label>
            <input type="hidden" id="carFullPicture" name="carFullPicture" style="margin-left: 35px;"/>
            <div class="layui-upload">
                  <button type="button" class="layui-btn " id="testList" style="margin-left: -8px;"><i class="layui-icon layui-icon-upload"></i>选择多文件</button> 
                  <div class="layui-upload-list" style="margin-left: 115px;display: none" id="table" >
                    <table class="layui-table">
                      <thead>
                        <tr>
	              			<th>文件名</th>
	                        <th>大小</th>
	                        <th>状态</th>
	                        <th>操作</th>
	               			<th>图片显示</th>
                        </tr>
         			   </thead>
                      <tbody id="demoList"></tbody>
                    </table>
                <button type="button" class="layui-btn" id="testListAction">开始上传</button>
                  </div>
            </div>
        </div>

js部分

 layui.use(['jquery','layer','form','table','laypage','upload'], function() {
    var $ = layui.jquery;
    var form = layui.form;
    var upload = layui.upload;
 
 
  //多文件列表示例
    var demoListView = $('#demoList');
    var uploadListIns =upload.render({
        elem: '#testList'
        ,url: '/common/upload'				//这里是你自己的图片上传地址
        ,accept: 'images'
        ,data:{}   //可放扩展数据  key-value
        ,multiple: true
        ,auto: false
        ,bindAction: '#testListAction'
        ,choose: function(obj){
            var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
            $("#table").css("display","");
            //读取本地文件
            obj.preview(function(index, file, result){
                var tr = $(['\<tr id="upload-'+ index +'">'
                    ,'\<td>'+ file.name +'\</td>'
                    ,'\<td>'+ (file.size/1014).toFixed(1) +'kb\</td>'
                    ,'\<td>等待上传\</td>'
                    ,'\<td>'
                    ,'\<button class="layui-btn layui-btn-mini demo-reload layui-hide">重传\</button>'
                    ,'\<button class="layui-btn layui-btn-mini layui-btn-danger demo-delete">删除\</button>'
                    ,'\</td>'
                    ,'\<td>'
                    ,'\</tr>'].join(''));
                //单个重传
                tr.find('.demo-reload').on('click', function(){
                    obj.upload(index, file);
                });
                //删除
                tr.find('.demo-delete').on('click', function(){
                    delete files[index]; //删除对应的文件
                    tr.remove();
                    uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
                });
                demoListView.append(tr);
            });
        }
	        ,done: function(res, index, upload){
	            ***appendUrl(res.url);     //为所需要的字段属性地址赋值【此处方法在引用下文】 ***
	            if(res.code == 200) //上传成功
	                var tr = demoListView.find('tr#upload-'+ index)
	                    ,tds = tr.children();
	            var src = '\<img style="width: 120px;" src='+res.url+' >'
	            tds.eq(2).html('\<span style="color: #5FB878;">上传成功\</span>');
	            tds.eq(3).html(''); //清空操作
	            tds.eq(4).html(src); //照片回显
	            return delete this.files[index]; //删除文件队列已经上传成功的文件
	        } 
	        //code为后台传回来的数据，具体多少自己定，
	        //后台只能传回json格式数据，不然会走error函数；
	        ,error: function(index, upload){
	            var tr = demoListView.find('tr#upload-'+ index)
	                ,tds = tr.children();
	            tds.eq(2).html('\<span style="color: #FF5722;">上传失败<\/span>');
	            tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
	        }
    });
})

//详情图追加值
function appendUrl(url) {
    var input=$("#carFullPicture").val();//先拿到input现有的值【这里的jQuery的id选择器为你自己需要赋值的字段属性】
//判断input框内是否为空
    if(input != "" && input != undefined){
        //检测逗号
        var valObj = input.split(",");
        $("#carFullPicture").val($("#carFullPicture").val()+","+url);//填充数据逗号隔开
    }else {
        //如果input内没有值 那第一条不加逗号
        $("#carFullPicture").val($("#carFullPicture").val()+url);//填充数据逗号隔开
    }
}

效果图