layui上传文件upload前对表单内的数据进行逻辑判断

在上传文件时,同时向后端传入表单的数据,比如上传的日期和一些想要处理的数据,但是需要在拖拽或者拖拽上传之前对传入的表单的数据进行逻辑判断,如上传的日期不能为空,就不允许上传。

但是我查了一些资料后,发现layui.uoload在前端在点击上传或者拖拽上传后无法在前端进行上传,所以我在控制层对传入的数据进行逻辑判断,当满足要求就返回false 。  

首先是页面表单

<form class="layui-form" action="" lay-filter="shapeForm">
            <div class="layui-row layui-col-space16 layui-form-item">
              <li>
                <b>  场景:</b>
                <div  style="display: inline-block;height: 30px; width: 260px;margin-left: 5px;">
                  <select  id="jkck" name="colSpecialCode"  href="javascript:" lay-filter="colSpecialName">
                    <option value="">请选择</option>
                    <#if colSpecialList??>
                      <#list colSpecialList as colSpecial>
                        <option value="${colSpecial.colSpecialCode!}" >${colSpecial.colSpecialName!}</option>
                      </#list>
                    </#if>
                  </select>
                </div>
              </li>
              <li style="height: 50px;">
                <b>时间:</b>
                <div  style="display: inline-block;height: 30px; width: 260px;margin-left: 5px;">
                  <input  autocomplete="off" type="text" class="layui-input layui-input-sm layui-date" id="tureSnapTime" name="tureSnapTime">
                </div>
              </li>
              <input type="hidden" >
            </div>
            <div class="layui-row layui-col-space16 layui-form-item" >
              <div class="layui-col-lg12" >
                <div class="layui-upload-drag" id="idUpload" style="min-height: 120px;padding-top: 80px;border: unset">
                  <i class="layui-icon"></i>
                  <p>点击上传,或将文件拖拽到此处</p>
                  <p>支持扩展名:.zip</p>
                  <input type="hidden" id="shapeTime" name="shapeTime" >
                </div>
              </div>
            </div>
          </form>

对应的js

//执行实例
        var uploadInst = upload.render({
          elem: '#idUpload' //绑定元素
          ,accept: 'file'
          ,url: '${base!}/lsyd/shapeDataUpload?'//上传接口
          ,data: form.val("shapeForm")
          ,before: function(obj){
            //获取表单参数
            this.data = form.val("shapeForm");
            layer.load();//上传loading
          }
          ,done: function(value){
            if(value.result){
              layer.msg('上传成功',{icon:1},function () {
                //假设这是iframe页
                returnFun()
                layer.closeAll('loading'); //关闭loading
                layer.close(index); //再执行关闭
              });
            }else {
              layer.msg('请完整填写信息',{icon:2});
              // layer.msg(value.msg,{icon:2});
              layer.closeAll('loading'); //关闭loading
            }
          }
          ,error: function(){
            layer.closeAll('loading'); //关闭loading
          }
        });

控制层

@ResponseBody
@RequestMapping("shapeDataUpload")
public Object uploadShape(@RequestParam(value = "file", required = false) MultipartFile file,
                          @RequestParam(name = "colSpecialCode", required = false) String colSpecialCode,
                          @RequestParam(name = "shapeTime", required = false) String shapeTime,
                          @RequestParam(name = "tureSnapTime", required = false) String tureSnapTime
                          ) {
  if(StringUtils.isEmpty(colSpecialCode)  || StringUtils.isEmpty(shapeTime) || StringUtils.isEmpty(tureSnapTime)){
    return false;
  }else {
    return colSpecialLsydClient.shapeDataUpload(file,colSpecialCode,shapeTime,tureSnapTime);
  }
}

示意图:

 

 

 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值