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页面引入下面两个文件：

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

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

    

		选择场地模型文件 
		（上传的场地模型文件名称必须为：basepoint.xml、Collect.xml、lane.xml或subitem.xml）
	  	

	    	

	      		

			        
文件名
			        
大小
			        
状态
			        
操作
	      			
	      		

	   	 	
	  	
	  	开始上传
	
    
    

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

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

      （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){
      ...
    }
});