Javascript 使用jquery的AJAX文件上传

我目前正试图解决一个问题。 我在一个页面上有几个表单，它们通过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();
            }
        });
    });

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

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

谢谢你的帮助

编辑

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

---

返回未定义的

我认为变量fd=new FormData（）是一个对象，它具有属性“file”。因此它无法将属性“file”传递给另一个对象“allgArray” 您需要在调用函数之前检查它

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

想想你发送的数据！这可能是从“fd”的“file”获取数据的另一个实例。希望它能帮助你^^ 顺便说一句，我上次用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);
        }
    });
}));

---

}))

add

headers:{“Content Type”：“multipart/form data”}

在ajax选项中

在单击之前是否将文件发送到路径？我不太清楚您的意思？操作流程如下：提交点击->获取所有输入字段的值->获取文件->放入数组->发送到phpI think

fd.append（）

正确执行，然后返回

未定义的

。它只是将内容附加到

fd

。因此，您将

未定义的
赋值给
文件
变量。只要删除file变量并继续使用fd，如果您使用的是jquery文件上传器，那么在add:function callback中，您就可以获取数据，这样就可以获取数据并存储在全局变量中。我用的东西和我用的一样@JeremyThille我试图将fd传递给数组，但即使在向fd附加了一些内容之后，fd仍然会产生以下结果：FormData{append:function}感谢您的帮助，显然我不能将FormData的实例称为“this”，因为这返回了我的提交按钮。所以“文件”仍然未定义问题发生在使用ajax发送数据之前。当我尝试记录allgArray->时，索引“file”仍然未定义