Ввод файла начальной загрузки Krajee: Отправка файлов с формой

Question

Не могу отправить форму вместе с выбранными файлами.Я попробовал два метода, которые находятся в Doc .Мне нужно отправить все вместе, нажав кнопку отправки в форме.

HTML

<input id="inputfile" name="file[]" type="file" multiple>

JS

$("#inputfile").fileinput({
        theme: "fas",
        uploadUrl: "{% url 'publication:publish' %}",
        uploadAsync: false,
        overwriteInitial: false,
        autoReplace: false,
        autoOrientImage: true,
        minFileCount: 1,
        maxFileCount: 4,
        uploadIcon : "<i class='fas fa-upload'></i>",
        removeIcon : "<i class='fas fa-trash-alt'></i>",
        browseIcon : "<i class='fas fa-search-plus'></i>",
        removeClass : 'btn btn-danger',
        showUpload: false,
        purifyHtml: true,
        maxFileCount: 10,
        uploadExtraData:{'csrfmiddlewaretoken': '{{ csrf_token }}'},
        fileActionSettings: {
            showUpload: false,
        },
    });
});


$('#form-publication').on('submit', function(e){
    e.preventDefault();
    var form = $('#form-publication').serialize();
    $.ajax({
        method: 'POST',
        url: '{% url "publication:publish" %}',
        enctype: "multipart/form-data",
        dataType: 'json',
        processData: false,
        data: {
            data: form,
        },
        beforeSend: function(xhr){xhr.setRequestHeader('X-CSRFToken', "{{csrf_token}}");},
        success: function(data, textStatus, jqXHR) {
            console.log(data);
            console.log(textStatus);
            console.log(jqXHR);
        },
        error: function(jqXHR, textStatus, errorThrown) {
            console.log(errorThrown);
            console.log(textStatus);
            console.log(errorThrown);
        }
    });
});

Могу ли я отправить все вместе, нажав кнопку Отправитькнопка?Я сделал тесты, отправляя только изображения через плагин, они получены на сервере, они хранятся в памяти, но этот POST бесполезен, потому что данные формы не отправляются вместе. Есть идеи?

Answer 1

Решено !

Мой Ajax:

$('#form-publication').on('submit', function(e){
    e.preventDefault();
    var formData = new FormData($(this).get(0)); // Creating a formData using the form.
    $.ajax({
        method: 'POST',
        url: '{% url "publication:publish" %}',
        dataType: 'json',
        cache: false,
        processData: false, // Important!
        contentType: false, // Important! I set dataType above as Json
        data: formData, // Important! The formData should be sent this way and not as a dict.
        beforeSend: function(xhr){xhr.setRequestHeader('X-CSRFToken', "{{csrf_token}}");},
        success: function(data, textStatus, jqXHR) {
            console.log(data);
            console.log(textStatus);
            console.log(jqXHR);
        },
        error: function (jqXHR, textStatus, errorThrown) {
            console.log(errorThrown);
            console.log(textStatus);
            console.log(errorThrown);
        }
    });
});

Мой файл начальной загрузки Входная конфигурация:

$("#inputfile").fileinput({
        theme: "fas",
        uploadUrl: "{% url 'publication:publish' %}",
        uploadAsync: true, // Upload using Ajax
        overwriteInitial: false,
        autoReplace: false,
        autoOrientImage: true,
        minFileCount: 1,
        maxFileCount: 4,
        uploadIcon : "<i class='fas fa-upload'></i>",
        removeIcon : "<i class='fas fa-trash-alt'></i>",
        browseIcon : "<i class='fas fa-search-plus'></i>",
        removeClass : 'btn btn-danger',
        showUpload: false, // Removing upload button from form
        purifyHtml: true,
        maxFileCount: 10,
        uploadExtraData:{'csrfmiddlewaretoken': '{{ csrf_token }}'}, // Send csrf token in submission
        fileActionSettings: {
            showUpload: false, // Removing upload button from action settings
        },
    });