一个简单但更有效的方法: new FormData()本身就像一个容器(或袋子)。你可以把所有attr或文件本身。 你唯一需要附加属性file fileName eg:

let formData = new FormData()
formData.append('input', input.files[0], input.files[0].name)

然后传入AJAX request。例如:

    let formData = new FormData()
    var d = $('#fileid')[0].files[0]

    formData.append('fileid', d);
    formData.append('inputname', value);

    $.ajax({
        url: '/yourroute',
        method: 'POST',
        contentType: false,
        processData: false,
        data: formData,
        success: function(res){
            console.log('successfully')
        },
        error: function(){
            console.log('error')
        }
    })

你可以用FormData附加n个文件或数据。

如果你在Node.js中使用AJAX请求从Script.js文件到Route文件，请注意使用 要求的事情。主体用于访问数据(即文本) 要求的事情。访问文件的文件(如图像、视频等)

<form id="form" method="post" action="otherpage.php" enctype="multipart/form-data">
    <input type="text" name="first" value="Bob" />
    <input type="text" name="middle" value="James" />
    <input type="text" name="last" value="Smith" />
    <input name="image" type="file" />
    <button type='button' id='submit_btn'>Submit</button>
</form>

<script>
$(document).on("click", "#submit_btn", function (e) {
    //Prevent Instant Click  
    e.preventDefault();
    // Create an FormData object 
    var formData = $("#form").submit(function (e) {
        return;
    });
    //formData[0] contain form data only 
    // You can directly make object via using form id but it require all ajax operation inside $("form").submit(<!-- Ajax Here   -->)
    var formData = new FormData(formData[0]);
    $.ajax({
        url: $('#form').attr('action'),
        type: 'POST',
        data: formData,
        success: function (response) {
            console.log(response);
        },
        contentType: false,
        processData: false,
        cache: false
    });
    return false;
});
</script>

/ / / / / otherpage.php

<?php
    print_r($_FILES);
?>

我在ASP中也遇到了同样的问题。Net MVC和HttpPostedFilebase，而不是在提交上使用表单，我需要使用按钮，点击，我需要做一些事情，然后如果都OK，提交表单，这是我如何让它工作

$(".submitbtn").on("click", function(e) {

    var form = $("#Form");

    // you can't pass Jquery form it has to be javascript form object
    var formData = new FormData(form[0]);

    //if you only need to upload files then 
    //Grab the File upload control and append each file manually to FormData
    //var files = form.find("#fileupload")[0].files;

    //$.each(files, function() {
    //  var file = $(this);
    //  formData.append(file[0].name, file[0]);
    //});

    if ($(form).valid()) {
        $.ajax({
            type: "POST",
            url: $(form).prop("action"),
            //dataType: 'json', //not sure but works for me without this
            data: formData,
            contentType: false, //this is requireded please see answers above
            processData: false, //this is requireded please see answers above
            //cache: false, //not sure but works for me without this
            error   : ErrorHandler,
            success : successHandler
        });
    }
});

这将比正确地填充你的MVC模型，请确保在你的模型，属性HttpPostedFileBase[]有相同的名称作为html中的输入控件的名称。

<input id="fileupload" type="file" name="UploadedFiles" multiple>

public class MyViewModel
{
    public HttpPostedFileBase[] UploadedFiles { get; set; }
}

你可以把它们附加到你的formdata上，把你的文件和数据添加进去。你可以看看这个。

https://developer.mozilla.org/en-US/docs/Web/API/FormData/append

为了更好地理解。你可以分别获取$_FILES文件和$_POST数据。

编辑:在新版本的JQuery(3.6)中，你也可以尝试使用contentType函数参数来代替enctype。试试contentType: multipart/form-data。

对我来说，如果Ajax请求中没有enctype: 'multipart/form-data'字段，它就无法工作。我希望它能帮助那些陷入类似问题的人。

尽管在表单属性中已经设置了enctype，但由于某些原因，Ajax请求在没有显式声明的情况下无法自动识别enctype (jQuery 3.3.1)。

// Tested, this works for me (jQuery 3.3.1)

fileUploadForm.submit(function (e) {   
    e.preventDefault();
    $.ajax({
            type: 'POST',
            url: $(this).attr('action'),
            enctype: 'multipart/form-data',
            data: new FormData(this),
            processData: false,
            contentType: false,
            success: function (data) {
                console.log('Thank God it worked!');
            }
        }
    );
});

// enctype field was set in the form but Ajax request didn't set it by default.

<form action="process/file-upload" enctype="multipart/form-data" method="post" >
     
     <input type="file" name="input-file" accept="text/plain" required> 
     ...
</form>

正如上面提到的，请特别注意contentType和processData字段。

下面的代码适合我

$(function () {
    debugger;
    document.getElementById("FormId").addEventListener("submit", function (e) {
        debugger;
        if (ValidDateFrom()) { // Check Validation 
            var form = e.target;
            if (form.getAttribute("enctype") === "multipart/form-data") {
                debugger;
                if (form.dataset.ajax) {
                    e.preventDefault();
                    e.stopImmediatePropagation();
                    var xhr = new XMLHttpRequest();
                    xhr.open(form.method, form.action);
                    xhr.onreadystatechange = function (result) {
                        debugger;
                        if (xhr.readyState == 4 && xhr.status == 200) {
                            debugger;
                            var responseData = JSON.parse(xhr.responseText);
                            SuccessMethod(responseData); // Redirect to your Success method 
                        }
                    };
                    xhr.send(new FormData(form));
                }
            }
        }
    }, true);
});

在Action Post方法中，将参数传递为HttpPostedFileBase UploadFile，并确保您的文件输入与Action方法的参数中提到的相同。 它也应该与AJAX Begin表单一起工作。

记住在这里，你的AJAX BEGIN表单将不会在这里工作，因为你在上面提到的代码中定义了你的post调用，你可以根据需求在代码中引用你的方法

我知道我回答得晚了，但这对我来说是有效的