与表单数据一起发送上传文件答案

【问题标题】：Send Uploading Files Together With Form Data与表单数据一起发送上传文件
【发布时间】：2014-01-22 08:43:09
【问题描述】：

var formData = new FormData($("form#neweventform")[0]);

$.ajax({
    url: "/Event/NewEvent",
    type: "POST",
    data: formData,//JSON.stringify(saveEventModel),
    async: false,
    dataType: 'json',
    //contentType: 'application/json; charset=utf-8',
    cache: false,
    contentType: false,
    processData: false,
    fail: function (r) {
        alert('error.');
    },
    success: function (result) {
        }
...

在控制器方面我有：

public JsonResult NewEvent(EventModel saveEventModel, List<HttpPostedFileBase> files)
        {
    }

我在List<HttpPostedFileBase> files 对象中收到文件，但它为空。可能是数据没有发布到服务器？

我认为我在概念上做错了什么。：/

如何将图片连同姓名、日期、地址等其他表单数据一起上传？..

【问题讨论】：

标签： c# jquery ajax asp.net-mvc-4 upload

【解决方案1】：

这是你要找的吗？

C# MVC 控制器

public class UploadController : Controller
{
    [HttpPost]
    public JsonResult FilesList(List<HttpPostedFileBase> myFiles)
    {
        string message;
        if (myFiles == null)
        {
            message = "myFiles is null";
        }
        else if (myFiles.Count != 2)
        {
            message = "myFiles.Count is " + myFiles.Count;
        }
        else
        {
            message = string.Format("myFiles[0] is {0}, myFiles[1] = {1}",
                myFiles[0] == null ? "null" : myFiles[0].FileName,
                myFiles[1] == null ? "null" : myFiles[1].FileName);
        }

        return Json(new
        {
            Message = message
        });
    }
}

HTML + Javascript

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>File Upload Demo </title>
    <script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
    <script type="text/javascript">
        $(function ()
        {
            $('#sendButton').click(function ()
            {
                var form = $('#myForm')[0];
                var formData = new FormData(form);

                $.ajax({
                    data: formData,
                    processData: false,
                    contentType: false,
                    dataType: 'json',
                    type: 'POST',
                    url: 'Upload/FilesList',
                    error: function (jqXHR, textStatus, errorThrown)
                    {
                        alert('failure\n' + textStatus);
                    },
                    success: function (data, textStatus, jqXHR)
                    {
                        alert(data.Message);
                    }
                });
            });
        });
    </script>
</head>
<body>
    <form id="myForm">
        File 1: <input type="file" name="myFiles" /><br />
        File 2: <input type="file" name="myFiles" />
    </form>

    <button id="sendButton">Submit over AJAX</button>
</body>
</html>

【讨论】：