Передача файла при помощи AJAX

439

27 июля 2017, 00:08

Здравствуйте.

Есть задача, получить видео при помощи WebRTC, записать его, и отправить на сервер, для последующего сохранения.

Удаётся записать видео м вэб-камеры, удаётся это видео скачать, но не понимаю, как передать его на сервер.

Изначально пытался передать содержимое в инпут и сделать сабмит формы, но понял, что так нельзя.

Теперь пытаюсь сделать то же самое, через AJAX, и тоже не получается, т.к. передаётся строка с названием, а не сам файл.

Если пытаюсь так:

function send() {
  var superBuffer = new Blob(recordedBlobs, {type: 'video/webm'});
  $.ajax({
    url: '',
    method: 'post',
    data: {
        'video': superBuffer,
        'csrftoken': csrftoken,
    },
    dataType: 'json',
    success: function(data) {
        console.log(data)
    },
    error: function(error) {
        console.log(error)
    }
  });
}

то получаю такую ошибку:

TypeError: 'slice' called on an object that does not implement interface Blob.

А вот пример функции для скачивания:

function download() {
  var blob = new Blob(recordedBlobs, {type: 'video/webm'});
  var url = window.URL.createObjectURL(blob);
  var a = document.createElement('a');
  a.style.display = 'none';
  a.href = url;
  a.download = blob;
  document.body.appendChild(a);
  a.click();
  setTimeout(function() {
    document.body.removeChild(a);
    window.URL.revokeObjectURL(url);
  }, 100);
}

Здесь всё работает хорошо, но основная задача, передать на сервер.

Answer 1

На оригинальном stackoverflow рекомендуют добавить в параметры ajax-запроса processData: false, contentType: false - Submitting a file

Answer 2

В итоге сделал так:

function send() {
  var superBuffer = new Blob(recordedBlobs, {type: 'video/webm'});
  var formdata = new FormData();
  formdata.append("filename", 'test.webm');
  formdata.append('data', superBuffer);
  $.ajax({
    url: '',
    method: 'post',
    processData: false, 
    contentType: false,
    data: formdata,
    success: function(data) {
        console.log(data)
    },
    error: function(error) {
        console.log(error)
    },
  });
}

Всё работает.

Спасибо за подсказку @Leo240

Answer 3

<form name="upload">
  <input type="file" name="myfile">
  <input type="submit" value="Загрузить">
</form>
<script>
  document.forms.upload.onsubmit = function() {
    var input = this.elements.myfile;
    var file = input.files[0];
    if (file) {
      upload(file);
    }
    return false;
  }
</script>

Мы получаем файл из формы через свойство files элемента <input> и передаём его в функцию upload:

function upload(file) {
  var xhr = new XMLHttpRequest();
  // обработчик для закачки
  xhr.upload.onprogress = function(event) {
    log(event.loaded + ' / ' + event.total);
  }
  // обработчики успеха и ошибки
  // если status == 200, то это успех, иначе ошибка
  xhr.onload = xhr.onerror = function() {
    if (this.status == 200) {
      log("success");
    } else {
      log("error " + this.status);
    }
  };
  xhr.open("POST", "upload", true);
  xhr.send(file);
}

Этот код отправит файл на сервер и будет сообщать о прогрессе при его закачке (xhr.upload.onprogress), а также об окончании запроса (xhr.onload, xhr.onerror).

Если нужно дополнительно передать имя файла или что-то ещё – это можно удобно сделать через форму, при помощи объекта FormData:

Создадим форму formData и прибавим к ней поле с файлом file и именем "myfile":

var formData = new FormData();
formData.append("myfile", file);
xhr.send(formData);

Данные будут отправлены в кодировке multipart/form-data. Серверный фреймворк увидит это как обычную форму с файлом, практически все серверные технологии имеют их встроенную поддержку. Индикация прогресса реализуется точно так же.

взято от сюда