Отправка формы Rails AJAX с активным вложением хранилища - PullRequest
Новая
       27

Отправка формы Rails AJAX с активным вложением хранилища

0 голосов
/ 21 сентября 2019

У меня есть форма, которую я хочу отправить, используя AJAX.Форма позволяет загружать изображение в виде вложения, среди других полей.Теперь, используя чистые рельсы, он работает просто отлично, и функция поста AJAX, которую я настроил, также работает ... пока я не попытаюсь загрузить этот файл изображения.Он просто отправляет без файла, как будто я не прикрепил его.Каков правильный поток для этого?функция ajax 

function postInstrument() {
  $("form#new_instrument").submit(function(e) {
    e.preventDefault();
    $.ajax({
      type: "POST",
      url: `http://localhost:3000/users/${userId}/instruments`,
      data: $(this).serialize(),
      dataType: "json",
      success: document.getElementById("new-instrument-form-div").innerHTML = 'Instrument Added!'
    })
  })

}

Ответы [ 2 ]

0 голосов
/ 21 сентября 2019

Решением было просто обернуть мою форму в FormData объект.

0 голосов
/ 21 сентября 2019

Вы используете .serialize для ваших данных изображения.И это невозможно.По этой ссылке вам лучше всего прочитать о загрузке файлов https://developer.mozilla.org/en-US/docs/Web/API/File/Using_files_from_web_applications

function FileUpload(img, file) {
  const reader = new FileReader();  
  this.ctrl = createThrobber(img);
  const xhr = new XMLHttpRequest();
  this.xhr = xhr;

  const self = this;
  this.xhr.upload.addEventListener("progress", function(e) {
        if (e.lengthComputable) {
          const percentage = Math.round((e.loaded * 100) / e.total);
          self.ctrl.update(percentage);
        }
      }, false);

  xhr.upload.addEventListener("load", function(e){
          self.ctrl.update(100);
          const canvas = self.ctrl.ctx.canvas;
          canvas.parentNode.removeChild(canvas);
      }, false);
  xhr.open("POST", "http://demos.hacks.mozilla.org/paul/demos/resources/webservices/devnull.php");
  xhr.overrideMimeType('text/plain; charset=x-user-defined-binary');
  reader.onload = function(evt) {
    xhr.send(evt.target.result);
  };
  reader.readAsBinaryString(file);
}

А здесь Как я могу загружать файлы асинхронно?

...