如何通过 JQuery Ajax POST 调用将文件作为电子邮件附件上传/发送到 MVC 控制器？答案

【问题标题】：How to upload/send files as email attachment from upload via JQuery Ajax POST call to MVC controller?如何通过 JQuery Ajax POST 调用将文件作为电子邮件附件上传/发送到 MVC 控制器？
【发布时间】：2021-03-01 13:49:48
【问题描述】：

我注意到除 IE 之外的现代浏览器会在 Jquery 对象中显示虚假路径，这是一种安全保护，可避免服务器通过浏览器访问客户端物理驱动器。

我在这里和那里看到了一些使用 formData 的其他帖子。我确实认为它适用于文件或仅适用于文件。但我遇到的情况需要通过上传到后端的文件传递一些其他信息，例如 ID 和几个字符串值。

我原来的实现是这样的：

Ajax 调用：

var emails = {
                RequestId: requestId, 
                ToEmails: toEmails,  
                CcEmails: ccEmails,  
                FileList: fileList   
            };

$.ajax({
    url: '@Url.Action("SendEmails")',
    type: 'POST',
    data: JSON.stringify(emails),
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (response) {
    }
});

.Net Core MVC 控制器：

[HttpPost]
public bool SendEmails([FromBody]ToCcEmails emails)
{
}

复杂对象类型类：

public class ToCcEmails
{
    public int RequestId { get; set; }
    public string ToEmails { get; set; }
    public string CcEmails { get; set; }
    public List<string> FileList { get; set; }
}

我应该对我的 ajax 代码甚至 MVC 操作文件进行哪些更改以使其与 formData 解决方案或任何其他解决方案正常工作？

谢谢。

【问题讨论】：

标签： jquery ajax asp.net-core http-post form-data

【解决方案1】：

我确实认为它适用于文件或仅适用于文件。但我在一个需要传递一些其他信息的情况，例如 ID 和上传到后端的文件的几个字符串值。

如果你想用文件发布数据，你的模型似乎不正确，下面是一个工作演示：

型号：

public class ToCcEmails
{
    public int RequestId { get; set; }
    public string ToEmails { get; set; }
    public string CcEmails { get; set; }
    public List<IFormFile> FileList { get; set; }
}

查看：

<form>
    <input type="text" name="RequestId" />
    <input type="text" name="ToEmails" />
    <input type="text" name="CcEmails" />
    <input type="file" multiple name="FileList" />
</form>

@section Scripts
{
<script>
    $("input[name='FileList']").change(function () {
        var data = new FormData();

        $("input[name='FileList']").each(function () {
            var ReadyToUpload = $(this)[0].files;
            if (ReadyToUpload.length > 0) {
                $.each(ReadyToUpload, function (i, file) {
                    data.append("FileList", file);
                });
            }
        });

        $("form input[type='text']").each(function (x, y) {
            data.append($(y).attr("name"), $(y).val());
        });
        $.ajax({
            url: '@Url.Action("SendEmails")',
            type: 'POST',
            data: data,
           // contentType: "application/json; charset=utf-8",
            dataType: "json",
            processData: false,
            contentType: false,
            success: function (response) {
            }
        });
    })
</script>
}

控制器：

[HttpPost]
public bool SendEmails([FromForm]ToCcEmails emails)
{
    return true;
}

结果：

【讨论】：