Question

我正在学习ASP.NET MVC，我对使用AJaxform或Jquery感到困惑。通过谷歌的一些答案，我能够理解JQuery是一个更好的选择，但仍然混淆了为什么？

这是我通过JQuery上传文件的代码，该代码将发送到我的控制器，但我的HttpPostedFileBase文件，CreatePost帖子

都为null

模型

 public class CreatePost
{
    public string userImage { get; set; }
}

控制器

 [HttpPost]
        public ActionResult Index(HttpPostedFileBase file, CreatePost post )
        {
            var test = post.userImage;
            if (file != null && file.ContentLength > 0)
            {
                var fileName = Path.GetFileName(file.FileName);
                var path = Path.Combine(Server.MapPath("~/Content/Images"), fileName);
                file.SaveAs(path);
            } 

            return RedirectToAction("Index");
        }

查看

    <script type="text/javascript">
    $(function () {
        $('form').submit(function () {
            if ($(this).valid()) {
                $.ajax({
                    url: this.action,
                    type: this.method,
                    data: $(this).serialize(),
                    success: function (result) {
                        $('#result').html(result);
                    }
                });
            }
            return false;
        });
    });

</script>
@using (Html.BeginForm("Index", "Home", FormMethod.Post, new { nctype = "multipart/form-data" }))
{

     <div class="editor-label">
            @Html.LabelFor(model => model.userImage)
        </div>
        <input type="file" name="file"/>

    <input type="submit" value="OK" />
    <div id="result"></div>
}

为什么我的文件和帖子都为null？

Answer 1

在Ajax中上传文件时出现问题，我认为问题来自form.Serialize()，而您可以使用FormData，如下所示：

P.S。所有版本的浏览器都不支持FormData

<script type="text/javascript">
$(function () {
    $('form').submit(function () {
        //Below line is added
        var formData = new FormData($('form')[0]);
        if ($(this).valid()) {
            $.ajax({
                url: this.action,
                type: this.method,
                //Below line is changed
                data: formData,
                success: function (result) {
                    $('#result').html(result);
                }
            });
        }
        return false;
    });
});

您的表单声明更改ncType至enctype

也会出现拼写错误

如果您也要使用JqueryDialog，您可以找到此链接对上传文件很有用： Uploading file via Jquery ui dialog and Ajax [Resolved]

Answer 2

此属性必须在ajax调用中

processData：false， contentType：false ...你的电话应该是这样的

 $.ajax({
            url: $url,
            type: 'POST',
            data: formData,
            processData: false, 
            contentType: false,

使用asp.net mvc 4上传文件问题

2 个答案: