ETJava Beta | Java    注册   登录
  • Ajax提交表单上传文件 同时验证上传文件格式

    发表于 2024-06-07 12:52:56     阅读(191)     博客类别:J2SE

    文件上传时对文件格式进行验证(文件后缀)

    form表单

    <form id="myForm" enctype="multipart/form-data">
          <table class="table">
            <tr>
              <td>
                  提交实验报告
              </td>
              <td>
                <input type="file" id="reportFile" name="reportFile">
              </td>
            </tr>
            <tr>
              <td>
                <input type="button" onclick="submitForm()" value="提交">
              </td>
            </tr>
          </table>
        </form>

    提交时验证图片格式

    页面中需要引入jquery库 

    <script type="text/javascript">
        function submitForm(){
          var filepath = $("#reportFile").val();
          // 验证文件格式
          if(filepath !=""){
            var extStart = filepath.lastIndexOf(".");
            var ext = filepath.substring(extStart, filepath.length).toUpperCase();
            if (ext == ".DOCX" || ext == ".DOC") {
              //提交请求
              submTo();
            }else{
              alert("文件仅限于word文档");
            }
          }
        }
    
        // 提交表单
        function submTo(){
          var form=new FormData(document.getElementById("myForm"));//拿到表单对象
          $.ajax({
            type : "POST",//提交方式
            url : "/report/save.html",//提交地址
            cache: false,    //上传文件不需缓存
            data:form,
            async:true,
            processData:false,//需设置为false,因为data值是FormData对象,不需要对数据做处理
            contentType:false,//需设置为false,因为是FormData对象,且已经声明了属性enctype="multipart/form-data"
            success : function(result) {
              var result = eval('('+result+')');
              if(result.success){
                alert("提交成功!");
              }else{
                alert(result.errorMsg);
              }
            },
            erreo : function(request) {
              alert("网络错误,请重试!!!");
            }
          });
        }
    </script>

    后台保存图片到指定位置

    @RequestMapping("/save")
        public void save(HttpServletRequest request,
                           HttpServletResponse response,
                           @RequestParam(value = "reportFile",required = false) MultipartFile reportFile) throws Exception {
            Report report = new Report();
            JSONObject jsonObject = new JSONObject();
            if(!reportFile.isEmpty()){
                String filePath=request.getServletContext().getRealPath("/");
                //String fileName= DateUtil.getCurrentDateStr()+"."+reportFile.getOriginalFilename().split("\\.")[1];
                String fileName = reportFile.getOriginalFilename();
                report.setFileName(fileName);
                report.setFilePath("/static/report/"+fileName);
                report.setFileSize((int)reportFile.getSize());
                report.setUserIp(request.getRemoteAddr());
    
                String[] data = fileName.split("-");
                if(data[0].equals("绵阳城市学院")&&data[1].contains("计科21")){
                    report.setClassNum(data[1]);
                    report.setStuName(data[2]);
                }
    
                if (report!=null && report.getClassNum()!=null && report.getClassNum().contains("计科21")){
                    // 文件查重
                    if(!reportExists(report.getFileName())){
                        // 文件保存到本地
                        reportFile.transferTo(new File(filePath+"static/report/"+fileName));
                        // 保存数据
                        Integer res = reportService.save(report);
                        if(res>0){
                            jsonObject.put("success",true);
                        }
                    }else {
                        jsonObject.put("success",false);
                        jsonObject.put("errorMsg","文件已经提交过,如需再次提交请联系管理员");
                    }
                }else{
                    // 文件名称格式不正确给出提示
                    jsonObject.put("success",false);
                    jsonObject.put("errorMsg","文件名格式不正确!\n\n应为: 绵阳城市学院-班级名称-学生名称(学号)-实验报告册.docx" +
                            "\n\n实际:"+report.getFileName());
                }
            }else{
                jsonObject.put("success",false);
                jsonObject.put("errorMsg","提交的文件内容不能为空");
            }
           ResponseUtil.write(response,jsonObject);
        }
    
        // 判断文件是否已经添加过了
        private boolean reportExists(String fileName) {
            return reportService.isExists(fileName);
        }