ajax提交表单数据和上传文件

想要通过ajax异步提交表单，表单内包含要上传的文件。正常提交Post提交表单没有问题，那么通过jquery的ajax方法如何构建提交数据呢？

下面以jquery的$ajax方法为例：

let formData = new FormData(document.getElementById('accountForm'));
$.ajax({
    type: 'POST',
    url: '/account',
    data: formData,
    dataType: 'json',
    contentType: false,
    processData: false,
    success: function (result) {

    },
    error: function (XMLHttpRequest, textStatus, errorThrown) {
    }
});

其中，contentType设置为false，表示提交到服务端的数据不要当成字符串处理。

processData设置为false，表示不要把发送的数据转换成查询字符串。

服务端接收文件的代码以.NET Core MVC为例：

[HttpPost]
public async Task<IActionResult> IndexAsync(UserRequest request)
{
    var userState = HttpContext.GetUserState();
    if (HttpContext.Request.Form.Files.Count > 0)
    {
        var file = HttpContext.Request.Form.Files[0];
        var extension = Path.GetExtension(file.FileName);
        var newFileName = $"{DateTime.Now.ToString("HHmmssfff")}{extension}";
        var path = $"{DateTime.Now.ToString("yyyyMMdd")}";
        var url = $"/upload/{path}/{newFileName}";
        var filePath = $"{_env.WebRootPath}\\upload\\{path}";
        if (!Directory.Exists(filePath))
        {
            Directory.CreateDirectory(filePath);
        }
        using (FileStream filestream = System.IO.File.Create($"{filePath}\\{newFileName}"))
        {
            await file.CopyToAsync(filestream);
            filestream.Flush();
        }
        request.Thumbnail = url;
    }
}

直接通过HttpContext.Request.Form.Files得到文件就可以保存了。