FormData添加文件不起作用

Question

I have form:

<form enctype="multipart/form-data" action="" method="post"  id="sendInvoiceForm">
    <input type="text" value="Some text">
    <input name="file[]" type="file"  multiple/>
    <input type="button" id="upload" value="Upload File" />
</form>

My js:

$('#upload').click(function(e) {
            e.preventDefault();
            var formData = new FormData();
            formData.append('files',$("#sendInvoiceForm")[0]);
            $.ajax({
                url: 'upload.php',
                type: 'POST',
                xhr: function() {
                    var myXhr = $.ajaxSettings.xhr();
                    return myXhr;
                },
                success: function (data) {
                },
                data: formData,
                cache: false,
                contentType: false,
                processData: false
            });
            return false;
        });

When I try to get my 'files' in php I get only [object HTMLFormElement] How can I get my files on php?

But if I create my formData as : var formData = new FormData($("#sendInvoiceForm")[0]); I can find my files in _FILES, but I need give name for this array.

How can I solve this problem? Thanks

Answer 1

The issue is because you're appending the form DOM Element to the FormData, not the file data. Instead, you should access the files array of that object:

formData.append('files', $('#sendInvoiceForm input[type="file"]')[0].files[0]);

As there can be multiple files selected, you'll need to loop through them:

$('#sendInvoiceForm input[type="file"]')[0].files.forEach(function(file) {
  formData.append('files', file, file.name);
});