layui多文件上传_EasyUI的filebox组件实现多文件上传的步骤

2023-10-27

EasyUI的filebox组件实现多文件上传的步骤

新增回款记录详情里面有个添加回款记录文件的按钮,点击选择文件,文件既可以选择一个也可以选择多个

a77fa55cfbc18a1dc5498deda1ac9d41.png
img
点击并拖拽以移动
<tr height="35px">
                        <td width="25%" height="20px" align="right">添加回款记录:td>
                        <td width="75%" height="20px" align="left">
                        <input class="easyui-filebox" data-options=" buttonText: '选择文件',prompt:'浏览'"  multiple="true" id="addFfile" name="file" style="width:90%" onchange="checkFile()" />
                        td>
tr>

通过添加回款记录文件的id,如下js的写法是根据官网来写的,先在前台把添加回款记录记录的一个改成多个,把multiple:true的注释给去掉

//easyui 文件框
            $('#addFfile').filebox({
                buttonText: '选择文件',  //按钮文本
                buttonAlign: 'right',   //按钮对齐
                multiple: true,       //是否多文件方式
                onChange: function (e) {
                    checkFile();
                }
            });
 //控制上传文件格式
            function checkFile(){
              var fileTypes = ['.jpg', '.jpeg', '.bmp', '.png', '.gif','.pdf'];
              var filePath = $('#addFfile').textbox('getValue');
             /*  if (filePath != '') */
              {
                var flag = false;
                var fileType = filePath.substring(filePath.lastIndexOf("."));
                 var beginIndex = fileType 
                if(fileTypes && fileTypes.length>0){
                  for (var i = 0; i                     if(fileTypes[i]==fileType){
                      flag = true;
                      break;
                    }
                  }
                }
                if (!flag) {
                  alert('不接受'+fileType+'文件类型上传');
                  $('#addFfile').textbox('setValue', '');
                  return;
                }
              }
            }

新增销售合同详情信息SalesDetailsController

在新增销售合同详情信息SalesDetailsController类的addSalesDetails方法里面加个MultipartFile[] files参数,然后获取到properties配置文件里的上传路径,给salesDetails设置随机ID,循环传过来的文件,在循环的过程中。先判断文件里面是否有文件名,有的话就上传,给上传的附件设置随机ID,把合同详情id赋值给附件parentId,再通过attachmentdao.insertAtt(att);保存上传的附件

           /**
             * 新增销售合同详情信息
             * @param person
             * @param request
             * @return
             * @throws IOException 
             */
            @RequestMapping(value="/addSalesDetails",method= RequestMethod.POST)
            @ResponseBody
            public Map addSalesDetails(SalesDetails salesDetails,HttpServletRequest request,@RequestParam("file") MultipartFile[] files) throws IOException{
              //获取登录人信息
              User user= (User) request.getSession().getAttribute("user");
              //日志类型,操作人,操作内容,操作人IP,操作方法
              //financeSalesDetailsService.insertSysLog("新增",user.getTrueName(),"新增人员信息: "+financeSalesDetailsService.getName(),user.getLoginIp(),"/person/addPerson");
              Map map = new HashMap();  
              String uploadDir = ConfigUtil.getConfig("upload.dir");
              salesDetails.setId(UUID.randomUUID().toString().replaceAll("-", ""));for (MultipartFile file : files) {if (StringUtils.isNotBlank(file.getOriginalFilename())) {
                        Attachment att = FileUpload.upload(file, uploadDir, "salesDetails");
                        att.setId(UUID.randomUUID().toString().replaceAll("-", ""));
                        att.setParentId(salesDetails.getId());
                        attachmentdao.insertAtt(att);
                    }else {continue;
                    }
                }
              salesDetailsService.addSalesDetails(salesDetails, user);//新增人员信息return map;  
            }

新增销售合同详情信息SalesDetailsServiceImpl

    @Override
    public Map addSalesDetails(SalesDetails salesDetails, User user) {
//        salesDetails.setId(UUID.randomUUID().toString().replace("-", ""));
        salesDetails.setCreateName(user.getCreateName());
        salesDetails.setCreateDate(new Date());
        salesDetails.setDeleteFlag(CoreConst.NO_DEL);//删除标识
        Map map = new HashMap();//        String uploadDir = ConfigUtil.getConfig("upload.dir");try {
            salesDetailsDao.insSalesDetails(salesDetails);
            map.put("status", "200");
            map.put("msg", "保存成功");
        } catch (Exception e) {
            map.put("status", "400");
            map.put("msg", "保存失败");
            e.printStackTrace();
        }return map;
    }

新增销售合同详情信息SalesDetailsDao

   /**
    * 添加一条销售合同详情记录
    */
     int insSalesDetails(SalesDetails salesDetails);

思路:本来新增之后SalesDetailsMapper.xml中的查询方法是销售合同表销售合同详情表附件表三张表联查,然后再从里面拿单个字段的,发现和附件表联查的时候,假如上传了两个或者三个文件,那么就会有两个或者三个一摸一样的数据,原因就在于附件表的路径名称和文件名称不同,销售合同详情的id是赋值给附件表的parentId

新增销售合同详情信息SalesDetailsMapper.xml的insSalesDetails方法

<insert id="insSalesDetails" parameterType="com.yhzn.model.finance.SalesDetails">
        insert into FINANCIAL_SALES_DETALL
        <trim prefix="(" suffix=")" suffixOverrides=",">
            <if test="id != null">
                ID,
            if>
            <if test="acceptId != null">
                ACCEPT_ID,
            if>
            <if test="money != null">
                MONEY,
            if>
            <if test="acceptMoney != null">
                ACCEPT_MONEY,
            if>
            <if test="createName != null">
                CREATE_NAME,
            if>
            <if test="createDate != null">
                CREATE_DATE,
            if>
            <if test="modifyName != null">
                MODIFY_NAME,
            if>
            <if test="modifyDate != null">
                MODIFY_DATE,
            if>
            <if test="deleteFlag != null">
                DELETE_FLAG,
            if>
            <if test="rev1 != null">
                REV1,
            if>
            <if test="rev2 != null">
                REV2,
            if>
            <if test="rev3 != null">
                REV3,
            if>
            <if test="acceptDate != null">
                ACCEPT_DATE,
            if>
            <if test="remark != null">
                REMARK,
            if>
        trim>
        <trim prefix="values (" suffix=")" suffixOverrides=",">
            <if test="id != null">
                #{id,jdbcType=VARCHAR},
            if>
            <if test="acceptId != null">
                #{acceptId,jdbcType=VARCHAR},
            if>
            <if test="money != null">
                #{money,jdbcType=DECIMAL},
            if>
            <if test="acceptMoney != null">
                #{acceptMoney,jdbcType=DECIMAL},
            if>
            <if test="createName != null">
                #{createName,jdbcType=VARCHAR},
            if>
            <if test="createDate != null">
                #{createDate,jdbcType=DATE},
            if>
            <if test="modifyName != null">
                #{modifyName,jdbcType=VARCHAR},
            if>
            <if test="modifyDate != null">
                #{modifyDate,jdbcType=DATE},
            if>
            <if test="deleteFlag != null">
                #{deleteFlag,jdbcType=DECIMAL},
            if>
            <if test="rev1 != null">
                #{rev1,jdbcType=VARCHAR},
            if>
            <if test="rev2 != null">
                #{rev2,jdbcType=VARCHAR},
            if>
            <if test="rev3 != null">
                #{rev3,jdbcType=VARCHAR},
            if>
            <if test="acceptDate != null">
                #{acceptDate,jdbcType=DATE},
            if>
            <if test="remark != null">
                #{remark,jdbcType=VARCHAR},
            if>
        trim>
    insert>

6c7c86c25d666d2dd4062e3c2437a885.png

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

layui多文件上传_EasyUI的filebox组件实现多文件上传的步骤 的相关文章

随机推荐

  • Fabric核心模块

    Fabric由五个核心模块组成的程序组 1 peer 主节点模块 负责存储区块链数据 运行维护链码 2 orderer 交易打包 排序模块 3 cryptogen 组织和证书生成模块 4 configtxgen 区块和交易生成模块 生成创始
  • Linux Clock

    http www wowotech net pm subsystem clk overview html Linux common clock framework 1 概述 http www wowotech net pm subsyste
  • 500 Request processing failed; nested exception is java.lang.NullPointerException

    类型 异常报告 消息 Request processing failed nested exception is java lang NullPointerException 描述 服务器遇到一个意外的情况 阻止它完成请求 报错原因 这种报
  • TensorFlow2 Fashion-MNIST图像分类(二)

    1 图像分类数据的标准化 本篇内容是 TensorFlow2 Fashion MNIST图像分类 一 的第二部分 请先阅读第一部分中的内容 上一部分内容最后提到 模型训练结果出现不拟合现象 主要原因就在于特征数据没有进行标准化处理 因此本部
  • Unity3d Animation动画详解。。。

    动画脚本 Animation Scripting Unity s 动画系统允许你创建一个漂亮的动画蒙皮角色 动画系统支持动画融合 混合 添加动画 步调周期时间同步 动画层 控制动画回放的所有方面 时间 速度 混合权重 每个顶点有1 2 4个
  • 机器学习之下游任务

    下游任务是该领域称为那些利用预训练模型或组件的监督学习任务
  • EtherCat--主站开源的C语言库SOEM-环境搭建

    一 SOEM主站环境搭建 一 安装VS 二 下载SOEM 1 3 1 源代码 链接地址 http openethercatsociety github io 三 安装WinPcap 4 1 3 exe 链接地址 https www winp
  • 3DsMAX一渲染就卡解决方法

    目前比较常见的3DMAX卡死原因有三个 一是win10输入法不兼容 二是内存和CPU运行过载 三是场景模型问题 1 兼容问题 win10的微软拼音不兼容 常见但很难让人相信的问题 C4D渲染卡死也可以这样解决 解决方法 打开 windows
  • 二维坐标系的转换

    二维坐标系的变换分为旋转变换和平移变换 一 旋转变换 假设已知基坐标系XOY中的一点P x y 坐标原点为O 绕点O旋转 可以求得点P在新坐标系X OY 中坐标值 x y 如下图所示 求解x 和y 的关键是坚持用已知的边做斜边来求解 结合上
  • 华为OD机试 - 求字符串中所有整数的最小和(Java)

    题目描述 输入字符串s 输出s中包含所有整数的最小和 说明 字符串s 只包含 a z A Z 合法的整数包括 1 正整数 一个或者多个0 9组成 如 0 2 3 002 102 2 负整数 负号 开头 数字部分由一个或者多个0 9组成 如
  • power相关:(一)低功耗设计目的与功耗的类型

    一 低功耗设计的目的 1 便携性设备等需求 电子产品在我们生活中扮演了极其重要的作用 便携性的电子设备便是其中一种 便携性设备需要电池供电 需要消耗电池的能量 在同等电能提供下 低功耗设计的产品就能够工作更长的时间 时间的就是生命 因此低功
  • 【MySQL】使用Visio绘制数据库关系模型图

    使用Visio绘制数据库关系模型图 1 新建项目 文件 新建 软件和数据库 数据库模型图 点击后 出现如下界面 2 绘制 左侧 实体关系 中将 实体 形状拖放到绘制界面 如下图 3 编辑实体名称 如下图 4 编辑列 点击 列 如下图 完成实
  • 【因果推断与机器学习】Causal_inference: Chapter 4

    Chapter4 Estimation 一旦我们找到了识别因果量的策略 我们就需要选择如何使用统计方法估计这些因果量 我们使用受实际计算应用程序启发的示例来描述最常用的方法 首先 我们介绍因果估计的基础知识 如何从已确定的估计值到估计器 我
  • Oracle入门使用

    表空间的创建 普通用户授权 sys登录 grant create tablespace to 用户名 grant drop tablespace to 用户名 给user01 一个临时用户的角色 grant connect to user0
  • make -j时不知道cpu核数设置多大合适

    make j nproc nproc 就是你可以设置的当前机器的最大值了
  • Python使用Psycopg2访问PostgreSQL

    本文将关注 安装Psycopg2并使用其API访问PostgreSQL数据库 然后带您完成数据插入 数据检索 数据更新和数据删除 接下来 它将介绍事务管理 连接池和错误处理技术 以使用PostgreSQL开发健壮的python程序 使用pi
  • Vue性能优化

    Vue 项目性能优化 现在Vue3 0都快发布了为什么还要优化2 0的项目 因为市场上公司90 的项目全是Vue2 0的项目 迁移的话成本太高 所以只能进行性能的优化调整 废话就不多赘述了 直接开始吧 一 活用异步组件 Vue cli打包的
  • CXL 2.0 Device配置空间寄存器组成

    目录 1 配置空间 1 1 PCI Power Management Capability Structure 1 2 PCI Express Capability Structure 2 扩展配置空间 2 1 Virtual Channe
  • Java~实现简单的扑克牌,洗牌,发牌,玩捉鬼游戏(讲解详细,代码齐全)

    目录 一 扑克牌的定义 1 牌的定义 2 玩家的定义 二 扑克牌的操作 初始化 洗牌 发牌等 1 初始化 2 洗牌 3 发牌 三 初始化 洗牌 发牌代码 全 四 捉鬼游戏 首先一副扑克牌是54张 这里我们去掉大小王 也就是52张扑克牌 有
  • layui多文件上传_EasyUI的filebox组件实现多文件上传的步骤

    EasyUI的filebox组件实现多文件上传的步骤 新增回款记录详情里面有个添加回款记录文件的按钮 点击选择文件 文件既可以选择一个也可以选择多个 img 点击并拖拽以移动