layui.js实现多文件上传前端html写法总结

最近需要写多文件上传功能，用到了layui.js控件，现进行总结，因为内容太多这里只总结了html页面的内容，java后台配置对接另一篇文章《layui上传多文件后台代码总结（java》，其实官网《layui.js文件上传示例》已经写的很详细了，我再啰嗦一下。

参考文章如下：

layui 上传组件后台代码分享( PHP 和 Java 的版本)

layui 上传组件后台代码分享( Python 的版本)

layui上传文件相关参数详解

首先要进行的步骤：

1.下载layui.js相关文档，《layui.js下载》，下载之后里面的内容如下：

只需要把layui文件夹拷贝到自己项目中即可

2.页面引入，在自己要实现文件上传功能的html页面引入下面两个文件：

<script src="${basePath?if_exists}/demp/layui/layui.js" charset="utf-8"></script>
<link rel='stylesheet' href='${basePath?if_exists}/demp/layui/css/layui.css' media="all">

注：代码里的文件路径就是项目里的实际文件路径

3.具体在页面的用法可参考官网示例《layui.js文件上传示例》，因为本人按照官网的示例加了点东西，现在贴出来（注解中会分开说明自己添加的内容）：

<body>
    <div class="layui-upload">
		<button type="button" class="layui-btn layui-btn-normal" id="testList" style="margin-left:10px;">选择场地模型文件</button> 
		<span style="color:red;font-size:14px;position:fixed;margin-top:20px;">（上传的场地模型文件名称必须为：basepoint.xml、Collect.xml、lane.xml或subitem.xml）</span>
	  	<div class="layui-upload-list" style="margin-left:10px;width:96%">
	    	<table class="layui-table">
	      		<thead>
			        <tr><th>文件名</th>
			        <th>大小</th>
			        <th>状态</th>
			        <th>操作</th>
	      			</tr></thead>
	      		<tbody id="demoList"></tbody>
	   	 	</table>
	  	</div>
	  	<button type="button" class="layui-btn" id="testListAction" style="margin-left:10px;">开始上传</button>
	</div>
    <input type="hidden" id="isCoverSourceFile" name="isCoverSourceFile" value="">
    <input type="hidden" id="schoolId" name="schoolId" value="">
</body>
<script>
layui.use('upload', function(){
  var $ = layui.jquery
  ,upload = layui.upload;
  //多文件列表示例
  var demoListView = $('#demoList')
  ,uploadListIns = upload.render({
    elem: '#testList'
    ,url: basePath + '/demp/model/uploadAreaFile.do?'
    ,data: {
		  schoolId: function(){
		    return $('#schoolId').val();
		  },
		  isCoverSourceFile: function(){
		    return $('#isCoverSourceFile').val();
		  }
	}
    ,accept: 'file'
    ,multiple: true
    ,auto: false
    ,bindAction: '#testListAction'
    ,choose: function(obj){
    	var school_id = $('#schoolId').val();
    	if(school_id == null || school_id =="" || school_id == undefined){
    		layer.msg("请选择驾校");
    	}
      var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
      //读取本地文件
      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-xs demo-reload layui-hide">重传</button>'
            ,'<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>'
          ,'</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){
    	document.getElementById("isCoverSourceFile").value="";
      if(res.code == 0){ //上传成功
      
        var tr = demoListView.find('tr#upload-'+ index)
        ,tds = tr.children();
        tds.eq(2).html('<span style="color: #5FB878;">上传成功</span>');
        tds.eq(3).html(''); //清空操作
        return delete this.files[index]; //删除文件队列已经上传成功的文件
      }else if(res.code == -2){ //上传提示
      	layer.confirm('该驾校已上传过此文件，是否选择重新上传？', {
		  btn: ['是','否'] //按钮
		}, function(){
			document.getElementById("isCoverSourceFile").value="true";
			var tr = demoListView.find('tr#upload-'+ index)
      		,tds = tr.children();
      		layer.closeAll('dialog');//关闭询问框
      		tds.eq(3).find('.demo-reload').click(); //触发重新上传点击事件
		}, function(){
			//和错误提示操作相同
			document.getElementById("isCoverSourceFile").value="";
	      	uploadListIns.config.error(index, upload,res.msg);
		});
      }else{
    	  this.error(index, upload,res.msg);
      }
    }
    ,error: function(index, upload,msg){
      var tr = demoListView.find('tr#upload-'+ index)
      ,tds = tr.children();
      tds.eq(2).html('<span style="color: #FF5722;">'+msg+'</span>');
      tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
    }
  });
});
</script>

注：（1）函数里的url和ajax中的url原理相同，写法可参考ajax中的。

（2）传参数到后台写法如下：

<body>
    <input type="hidden" id="schoolId" name="schoolId" value="">
    <input type="hidden" id="isCoverSourceFile" name="isCoverSourceFile" value="">
</body>
<script>
...
,data: {
    schoolId: function(){
		return $('#schoolId').val();
	},
	isCoverSourceFile: function(){
	    return $('#isCoverSourceFile').val();
	}
}
...
</script>

（3）在done方法里和在里面的layer.confirm询问框调用errorr，两种写法如下所示：

var uploadListIns = upload.render({
....
,done: function(res, index, upload){
    if(res.code == 0){
        layer.confirm('该驾校已上传过此文件，是否选择重新上传？', {
            btn: ['是','否'] //按钮
        }, function(){
            layer.msg("您选择了是")
        }, function(){
            layer.msg("您选择了否");
            uploadListIns.config.error(index, upload,res.msg);//对error方法的调用
        });
    }else{
        this.error(index, upload,res.msg);//对error方法的调用
    }
}
,error: function(index, upload,msg){
      ...
    }
});

layui.js实现多文件上传前端html写法总结

猜你喜欢