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);
        }
    });
});

我的Bootstrap文件输入配置：

$("#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
        },
    });

Answer 2

我已经使用这种方法解决了这个问题：

{
   "sites": {
        "resourceCode": "CODE1",
        "items": [...]
    },
    ...
}

配置：

<form id="my-form">
    ...other fields
    <input class="archivos" name="archivos[]" type="file" multiple>
</form>

非常重要的一点是，必须注释uploadUrl，因为该插件可以很好地满足我们的目的。还要将uploadAsync设置为true。

这样，我们可以发送如下表格：

$('.archivos').fileinput({
    language: 'es',
    // uploadUrl: '#',
    showPreview: true,
    showUpload: false,
    browseOnZoneClick: true,
    allowedPreviewTypes: false,
    maxFileSize: 15000,
    // uploadAsync: false,
    uploadAsync: true,
    theme: "explorer-fas",
    removeFromPreviewOnError: true,
    allowedFileExtensions: ['jpg', 'png', 'gif'],
    maxFileCount: 10,
    overwriteInitial: false,
    fileActionSettings: {
        showUpload: false,
        showZoom: false,
    },
});

Krajee Bootstrap文件输入：使用以下格式发送文件

2 个答案: