java - 为什么 ajax post 不能在服务器上正确保存文件？

Question

所以我还是迷路了。我有一个带有模态的表单。模态用于“附加”文件。我想将文件临时存储在服务器上，然后在提交表单时将其与其他表单输入值一起通过电子邮件发送。我正在使用此 ajax 调用将其发布到服务器，以便整个表单不会提交和刷新页面。但是要通过ajax调用保存它，我需要序列化文件，所以它没有正确保存。我对此有多个问题......一个是文档保存为空并且不会打开，我相信原因是我不知道如何获取文件的名称。Document 通常用于在我的 sql 数据库文档表中创建一个新项目，所以通过这种方式调用它，我在我的数据库中得到一个空条目。有更好的方法来做到这一点吗？我也尝试过保存为多部分文件，但我无法让 ajax 帖子使用它，因为它似乎需要被序列化。任何想法都非常感谢。谢谢！

这是我的控制器：

@RequestMapping(value="/directBindAjax", method=RequestMethod.POST)
public @ResponseBody Document docSend(@ModelAttribute(value="document") Document document, Model model) throws IOException {
        FileOutputStream fout = new FileOutputStream(storageService.getUploadDir() + document.getStorage());
        ObjectOutputStream oos = new ObjectOutputStream(fout);

        model.addAttribute("document", document);
        return document;
}

这是我的ajax调用

$('#attachTheDoc').on('click', function(event){
                var data = $('#newRequiredDocForm').serialize();
                
                $.ajax({
                    type: "POST",
                    url: "/directBindAjax",
                    data: data,
                    processData: false,
                    cache: false,
                    success: function(data, jqXHR){
                       alert("Your files have been saved");
                    }
                });
            });

这是我尝试按照另一篇关于通过 ajax 发送表单的帖子中建议的方式执行此操作时遇到的错误。我的网络浏览器也出现 403 错误。

这是我的表单html：

<form enctype="multipart/form-data" id="newRequiredDocForm"  th:action="@{/directBindAjax}" method="post" th:object="${newDoc}">
  <br/>
  <div class="row">
      <div class="col-xs-4 col-sm-3 text-right"><label class="modalLabel">Type:</label></div>
      <div class="col-xs-8 col-sm-7">
          <select class="form-control" id="type">
              <option value="Invoice">Invoice</option>
              <option value="Binder">Binder</option>
              <option value="Application">Application</option>
          </select>
      </div>
  </div>
  <br/>
  <div class="row">
      <div class="col-xs-4 col-sm-3 text-right">
          <label class="modalLabel">File:</label>
      </div>
      <div class="col-xs-8 col-sm-7">
          <input type="file" id="file" name="upfile" multiple="multiple" style="margin-right:-20px;"/>
      </div>
  </div>
  <br/><br/>
  <div style="text-align: right;">
      <input type="button" id="attachTheDoc" class="btn btn-docModal" value="Upload"/>
  </div>
</form>

标签： javajqueryajaxspring-boot