Ajax-вызов, используемый для загрузки файла в папку на сервере, возвращая ошибку 403

Question

Итак, после нескольких дней исследований я все еще застрял в этой модальной ситуации ... У меня есть две формы на одной странице, но одна находится в модальной.Похоже, что единственный способ передать модальное сообщение (которое позволяет пользователям загружать файл для сохранения на сервере при отправке) без обновления страницы (и потери данных из другой формы) - это использовать javascript-вызов ajax.Я продолжаю получать ошибку 403 в браузере, когда я делаю это ... не знаю, почему или как это исправить, поскольку я не получаю никаких реальных сообщений об ошибках.Это мой пост или контроллер ajax?Не уверен ..., пожалуйста, помогите!

Мне удалось загрузить файл в папку в java / spring-boot, но я терял данные формы, потому что модальная отправка обновила бы страницу, поэтому я не думаю, что этопроблема с серверомИ если я использую on ('submit') вместо onClick, он отправляет файл в папку хранилища, но обновляет страницу.Почему не работает моя функция onclick?

Я основываю свою ситуацию на этом: post

HTML:

    <div id="modal" class="modal" data-izimodal-title="Upload a Document">
       <div id="newRequiredDocForm">
           <form enctype="multipart/form-data" th:action="directBind"  method="post" th:object="${document}">
              <div class="row">
                   <div class="col-xs-4 col-sm-3 text-right"><label class="modalLabel">Type:</label></div>
                   <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="document" 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="Submit"/></div>
            </form>
        </div>
    </div>

Контроллер:

@RequestMapping(value="/directBind_ajax", method=RequestMethod.POST)
public @ResponseBody Document docSend(@ModelAttribute("document") Document document, Model model, @RequestParam("file") MultipartFile file){
        document.setStorage(storageService.store(file));
        model.addAttribute("newDocument", document);
        return document;
    }

Ajax javascript:

$('#attachTheDoc').click(function(){
  var data = $('#file').val();
  console.log($('#file').val());
  $.ajax({
      type: "POST",
      data: data,
      cache: false,
      url: "/directBind_ajax",
      success: function(data){
          alert("Your files have been saved");
      },
      error: function(){
          alert("Error - File not uploaded");
      }
  });
});