使用 jquery 进行 AJAX 文件上传

Question

我目前正在尝试解决一个问题。 我在一个页面上有多个表单，它们通过 ajax 异步发送到后端。

现在他们中的一些需要有一个不中断进程的文件上传，所以它也需要异步处理。

我正在尝试这样解决：

// Allgemein Submit
    $allgSubmit.click(function(){
        event.preventDefault();
        var gehrKundennummer = $('#gehrKundennummer').val();
        var kundenklasse = $("input[type='radio'][name='kundenklasse']:checked").val();
        var lkw12t = $('#lkw12t').val();
        var lkw3t = $('#lkw3t').val();
        var autobus = $('#autobus').val();
        var firmenname1 = $('#firmenname1').val();
        var firmenname2 = $('#firmenname2').val();
        var uidnummer = $('#uidnummer').val();
        var peselregon = $('#peselregon').val();
        var firmenart = $('#firmenart option:selected').val();
        var strasse = $('#strasse').val();
        var ort = $('#ort').val();
        var plz = $('#plz').val();
        var land = $('#land').val();
        var fd = new FormData();
        var file = fd.append('file', $('#allg_firmen_dok').get(0).files[0]);

        var allgArray = { 
            'gehrKundennummer':gehrKundennummer, 
            'kundenklasse':kundenklasse,
            'lkw12t':lkw12t,
            'lkw3t':lkw3t,
            'autobus':autobus,
            'firmenname1':firmenname1,
            'firmenname2':firmenname2,
            'uidnummer':uidnummer,
            'peselregon':peselregon,
            'firmenart':firmenart,
            'strasse':strasse,
            'ort':ort,
            'plz':plz,
            'land':land,
            'file':file
        };

        //var data = new FormData();
        //jQuery.each(jQuery('#allg_firmen_dok')[0].files, function(i, file) {
          // data.append('file-'+i, file);
        //});

        console.log(allgArray);
        $.ajax({
            url: "PATHTOFILE/logic/logic_update_client_allg.php",
            type: "POST",
            data: allgArray,
            processData: false,  // tell jQuery not to process the data
            contentType: false,
            success: function(allgArray){
                alert(allgArray);
                var allgSave = $('#allgSave');
                allgSave.text('Aktualisieren erfolgreich!');
                allgSave.toggle();
            },
            error: function(){
                var allgSave = $('#allgSave');
                allgSave.text('Aktualisieren fehlgeschlagen!');
                allgSave.toggle();
            }
        });
    });

数组的控制台日志正确返回除“文件”之外的所有值 它说未定义。

不知道怎么处理，有没有什么要求我遗漏的？

感谢您的帮助

编辑

var file = fd.append('file', $('#allg_firmen_dok').get(0).files[0]);

返回未定义

Answer 1

我认为变量 fd = new FormData() 是一个对象，它具有“文件”属性。所以它不能将属性“file”传递给另一个对象“allgArray” 你需要在调用函数之前检查它

 $.ajax({
        url: "PATHTOFILE/logic/logic_update_client_allg.php",
        type: "POST",
        data: allgArray,

想想您发送的数据！从“fd”的“文件”获取数据可能是另一个实例。希望对你有帮助！ ^^ 顺便说一句，我上次使用 AJAX 发送文件

$(document).ready(function (e) {
$("#Form").on('submit',(function(e) {
    e.preventDefault();
    $.ajax({
        url: "uploader.php", // Url to which the request is send
        type: "POST",             // Type of request to be send, called as method
        data: new FormData(this), // Data sent to server, a set of key/value pairs (i.e. form fields and values)
        contentType: false,       // The content type used when sending data to the server.
        cache: false,             // To unable request pages to be cached
        processData:false,        // To send DOMDocument or non processed data file it is set to false
        success: function(data)   // A function to be called if request succeeds
        {
             console.log(data);
        }
    });
}));

});

Answer 2

在 ajax 选项中添加headers: { "Content-Type": "multipart/form-data" }