У меня есть функция отправки через ajax, которая получает значения из формы через jQuery. Есть несколько зон перетаскивания, которые мне нужно захватить при нажатии кнопки отправки для всей формы.

Я могу получить доступ к объектам файла dropzones следующим образом:

$('#foobar')[0].dropzone.getAcceptedFiles()[0]

Что дает мне что-то вроде этого:

File
​
_removeLink: <a class="dz-remove" href="javascript:undefined;" data-dz-remove="">
​
accepted: true
​
dataURL: "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopG…etc"
​
height: 545
​
lastModified: 1516739363000
​
lastModifiedDate: Date 2018-01-23T20:29:23.000Z
​
name: "foobar.jpg"
​
previewElement: <div class="dz-preview dz-image-preview">
​
previewTemplate: <div class="dz-preview dz-image-preview">
​
size: 45960
​
status: "queued"
​
type: "image/jpeg"
​
upload: Object { progress: 0, total: 45960, bytesSent: 0, … }
​
webkitRelativePath: ""
​
width: 550
​
__proto__: FilePrototype { name: Getter, lastModified: Getter, lastModifiedDate: Getter, … 

Когда я пытаюсь поместить это в объект для отправки на сервер, я получаю сообщение об ошибке:

var params = {
  id: $('bla).val(),
  dropzone_image: $('foobar')[0].dropzone.getAcceptedFiles()[0]
}

TypeError: 'click' called on an object that does not implement interface HTMLElement.

Как я могу прикрепить сюда этот файл dropzone как изображение / файл для отправки на бэкэнд?

1
kennyg 13 Мар 2018 в 02:20

2 ответа

Лучший ответ

Чтобы отправить файлы изображений dropzone на бэкэнд вручную, мне пришлось создать javascript объект FormData.

Например:

function getValues() {
    var formData = new FormData();
    // these image appends are getting dropzones instances
    formData.append('image', $('#foobar_image')[0].dropzone.getAcceptedFiles()[0]); // attach dropzone image element
    formData.append('image_2', $('#barfoo')[0].dropzone.getAcceptedFiles()[0]);
    formData.append("id", $("#id").val()); // regular text form attachment
    formData.append("_method", 'PUT'); // required to spoof a PUT request for a FormData object (not needed for POST request)

    return formData;
}

$(document).on('submit','#form', function(e) {
    e.preventDefault();
    e.stopPropagation();    

    $.ajax({
        method: 'POST',
        url: url/you/want,
        data: getValues(),
        processData: false, // required for FormData with jQuery
        contentType: false, // required for FormData with jQuery
        success: function(response) {
            // do something
        }
    });
});
1
kennyg 16 Мар 2018 в 15:27

На основе http://api.jquery.com/jquery.ajax/ добавьте свою зону сброса расположение файла в параметре данных, например:

$.ajax({
   url: "location.url",
   data: $('foobar')[0].dropzone.getAcceptedFiles()[0]
}).done(function() {});

Надеюсь это поможет

0
trueChazza 12 Мар 2018 в 23:31