如何通过 JQuery Ajax POST 调用 MVC 控制器上传 upload/send 文件作为电子邮件附件？

Question

我注意到除 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)
{
}

复杂对象类型class:

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 解决方案或任何其他解决方案一起正常工作？

谢谢。

Answer 1

I do think it will work with file or maybe files only. But I am in a situation which needs to pass some other information like ID and a couple of string values with the file(s) uploaded to the backend.

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

型号：

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;
}

结果：

如何通过 JQuery Ajax POST 调用 MVC 控制器上传 upload/send 文件作为电子邮件附件？

How to upload/send files as email attachment from upload via JQuery Ajax POST call to MVC controller?

jquery

ajax

asp.net-core

http-post

form-data