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

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

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

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>