使用jquery的AJAX Fileupload

时间:2015-05-21 06:29:47

标签: javascript php jquery ajax file-upload

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

返回undefined

2 个答案:

答案 0 :(得分:0)

我认为变量fd = new FormData()是一个Object,它有属性" file"。所以它无法传递属性" file"到另一个对象" allgArray" 在调用函数

之前,您需要检查它
 $.ajax({
        url: "PATHTOFILE/logic/logic_update_client_allg.php",
        type: "POST",
        data: allgArray,

考虑您发送的数据!它可能是另一个从" file"获取数据的实例。 " 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);
        }
    });
}));

});

答案 1 :(得分:0)

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