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

时间:2014-01-04 18:06:09

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

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对象中收到文件,但它为空。可能是数据未发布到服务器?

我认为我在概念上做错了。 :/

如何将图像与名称,日期,地址等其他表格数据一起上传?..

1 个答案:

答案 0 :(得分:2)

这是你要找的吗?

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>