Почему ajax post не сохраняет файл на сервере должным образом?

Question

Так что я все еще здесь потерян.У меня есть форма с модальным.Модал используется для «прикрепления» файла.Я хочу временно сохранить файл на сервере, а затем отправить его по электронной почте с остальными значениями ввода формы при отправке формы.Я использую этот вызов ajax, чтобы отправить это на сервер, чтобы вся форма не отправляла и не обновляла страницу.Но чтобы сохранить его с помощью вызова ajax, мне нужно сериализовать файл, и тогда он не будет сохранен правильно.У меня несколько проблем с этим ... во-первых, документ сохраняется как ноль и не открывается, и я считаю, что причина в том, что я не знаю, как получить имя файла.Документ обычно используется для создания нового элемента в моей таблице документов базы данных 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>