文件不是通過Ajax請求發送的，在請求中不是“文件名”，而在服務器端是空請求

Question

我正在嘗試通過Ajax調用和jQuery上傳文件。 您將在下面的代碼中看到動態處理的每個input[type="file"]並在Select2元素的change事件上創建它們。

var tipoRecaudo = $('#tipoRecaudo'),
    tipo_recaudo = tipoRecaudo.val(),
    selectedIdsTipoRecaudo = [];

tipoRecaudo.select2({
    ajax: {
        dataType: 'json',
        url: function () {
            return Routing.generate('obtenerRecaudosTramite');
        },
        data: function (tipo_recaudo) {
            return {
                filtro: tipo_recaudo
            }
        },
        results: function (data) {
            var myResults = [];
            $.each(data.entities, function (index, item) {
                if (selectedIdsTipoRecaudo.indexOf(item.id.toString()) === -1) {
                    myResults.push({
                        'id': item.id,
                        'text': item.nombre
                    });
                }
            });
            return {
                results: myResults
            };
        }
    },
    formatAjaxError: function () {
        return Translator.trans('mensajes.msgNoConexionServidor', {}, 'AppBundle');
    }
}).change(function () {
    var id = $(this).val(),
        selectedData = tipoRecaudo.select2("data"),
        htmlTpl = '<table class="table"><caption>'+ selectedData.text + '</caption><tbody><tr><td>';
        htmlTpl += '<input type="hidden" name="tipoRecaudos[]" id="tipoRecaudo ' + id + '" value="' + selectedData.id + '" /><div class="row"><div class="col-xs-6"><div class="form-group"><input type="file" id="recaudosNombreArchivo' + id + '" name="recaudos[nombre_archivo][]" multiple="multiple" class="form-control" /></div></div></div></div>';
        htmlTpl += '</td></tr></tbody></table>';

    selectedIdsTipoRecaudo.push(id);
    $('#recaudoContainer').append(htmlTpl);
});

$('#recaudoContainer').on('change', 'input[type=file]', function (event) {
    $("input:file").filestyle({
        buttonText: "Seleccionar archivo",
        iconName: "fa fa-upload",
        buttonName: "btn-primary"
    });
});

$('#btnGuardarPasoSieteAgregarProducto').on("click", function (event) {
    event.stopPropagation(); // Stop stuff happening
    event.preventDefault(); // Totally stop stuff happening

    // Create a formdata object and add the files
    var formData = $('#formRecaudosTramites').serialize();

    $.each($('#formRecaudosTramites')[0].files, function (key, value) {
        formData = formData + '&recaudos[]=' + value;
    });

    $.ajax({
        url: Routing.generate('rpniSubirRecaudos'),
        type: 'POST',
        data: formData,
        cache: false,
        dataType: 'json',
        contentType: 'multipart/form-data',
        processData: false, // Don't process the files
        //contentType: false // Set content type to false as jQuery will tell the server its a query string request
    }).done(function (data, textStatus, jqXHR) {
        if (typeof data.error === 'undefined') {
            console.log('SUCCESS: ' + data.success);
        } else {
            // do something with error
        }
    }).fail(function (jqXHR, textStatus, errorThrown) {
        // do something with fail callback
        // STOP LOADING SPINNER
    });
});

發生的事情是：查詢字符串上沒有filenames ，沒有文件通過Ajax調用上傳或發送，而是發送了一個[object Object] ，我在做什么錯呢？ 可以給我一些適用的代碼嗎？

編輯 ：

讀取用戶引用的帖子后 ，我將代碼更改為以前的代碼，現在錯誤打開了：

TypeError: a is undefined
    ...rCase()},each:function(a,b,c){var d,e=0,f=a.length,g=s(a);if(c){if(g){for(;f>e;e...

那里怎么了

注意 ：是的，我知道有很多用於處理此問題的插件，例如來自Blueimp，Dropzone的jQuery文件上載以及其他一些插件，但由於我從Symfony2項目的OneupUploaderBundle內部開始使用jQuery File Uploader並花了4天沒有成功，所以我將它們遺漏了。所以我走到另一邊：自己做東西，這樣我就可以學到其他東西並提​​高知識

Answer 1

我認為這會幫助您，

 var fd = new FormData();
 //name is the key on the page of php to access the file
 fd.append('name', $('#aob_file')[0].files[0]);

 pass this fd object to your data field in ajax,