layui 之 upload组件

2019独角兽企业重金招聘Python工程师标准>>>

场景：

1、处于新增页面；

2、表单基本数据与附件想一次提交；

3、需要异步处理；

处理逻辑：

1、先ajax提交基本信息；

2、返回数据ID；

3、携带ID并提交file文件上传；

4、提示上传成功（或处理成功）。

但是layui官网并没有讲解如何在此场景下的参数传递，那么会面临id无法传递的问题；

其实只要在before方法中，赋值参数即可。（this.data={'':''};）

layui 2.1.0

,before: function(obj){ 
          layer.load(); //上传loading
          this.data={'id':$("#docId").val()};
 }

完整如下：

$.ajax({
    url:"form/….",
    data:params,
    dataType:"json",
    type:"POST",
    success:function (data) {
         $("#docId").val(data.data);
         //成功之后执行附件上传
         uploadInst.upload();
     }          
})

layui.use('upload', function() {
            var $ = layui.jquery, upload = layui.upload;
            //选完文件后不自动上传
            uploadInst =  upload.render({
                elem: '#fileBtn'
                ,url: 'url/upload'
                ,auto: false
                //,multiple: true
                ,bindAction: '#bindBtn'
                ,accept: 'file'
                ,done: function(res){
                    if(res.ret == 1){ //上传成功
                        layer.closeAll('loading'); //关闭loading
                        showMsg("上传成功！");
                    }else{
                        layer.closeAll('loading'); //关闭loading
                        showMsg("上传失败！");
                    }
                }
                ,before: function(obj){
                    layer.load(); //上传loading
                    this.data={'id':$("#docId").val()};
                }
                ,choose: function(obj){
                }
                ,error: function(index, upload){ 
                }
            });

        });

转载于:https://my.oschina.net/gmarshal/blog/1614961