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

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

参考文章如下:

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

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

layui上传文件相关参数详解

首先要进行的步骤:

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

layui.js实现多文件上传前端html写法总结_第1张图片

只需要把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){
      ...
    }
});

你可能感兴趣的:(html,layui)