logo标签列表

ASP.NET MVC中的Ajax文件上传和JQuery formData

c#jqueryajaxasp.net-mvcfile-upload
13

我在向服务器端的操作方法(posting server side action method)提交formData时遇到了一些问题。由于ajax调用不会将文件发送到服务器，因此我必须手动将文件上传器数据添加到formData中，就像这样：

var formData = new FormData();
formData.append("imageFile", $("#imageFile").file);
formData.append("coverFile", $("#coverFile").file);

我编写了一个jQuery函数，需要使用Ajax调用将表单数据发布到服务器。这个函数能够工作，但是在服务器端发布的formData始终为null！

这是我的脚本：

    <script>
        function SubmitButtonOnclick()
        {    
            var formData = new FormData();
            formData.append("imageFile", $("#imageFile").file);
            formData.append("coverFile", $("#coverFile").file);

            $.ajax({
                type: "POST",
                url: '@Url.Action("EditProfile", "Profile")',
                data: formData,
                dataType: 'json',
                contentType: "multipart/form-data",
                processData: false,
                success: function (response) {
                    $('#GeneralSection').html(response.responseText);
                },
                error: function (error) {
                    $('#GeneralSection').html(error.responseText);
                }
            });
        }
    </script>

编辑 1： 这是控制器中的操作方法：

        public ActionResult EditProfile(ProfileGeneralDescription editedModel,
                                HttpPostedFileBase imageFile,
                                HttpPostedFileBase coverFile,
                                string postOwnerUser)
        {
            try
            {
                if (postOwnerUser == User.Identity.Name)
                {
                // edit codes...    
                    var result = GetProfileGeneralDescription(postOwnerUser);
                    return PartialView("_GeneralProfile", result);
                }
                else
                {
                    var error = new HandleErrorInfo(
                    new Exception("Access Denied!"),
                    "Profile",
                    EditProfile
                    return PartialView("~/Views/Shared/Error.cshtml", error);
                }
            }
            catch (Exception ex)
            {
                var error = new HandleErrorInfo(ex, "Profile", EditProfile
                return PartialView("~/Views/Shared/Error.cshtml", error);
            }
        }

编辑 2： Cshtml 视图文件内容：

@model Website.Models.ViewModel.Profile

    @using (Ajax.BeginForm("EditProfile", "Profile", new { postOwnerUser = User.Identity.Name }, new AjaxOptions()
    {
        HttpMethod = "POST",
        InsertionMode = InsertionMode.Replace,
        UpdateTargetId = "GeneralSection"
    }, new { enctype = "multipart/form-data" }))
    {

        <div>
             <button id="btnSubmit" type="button" onclick="SubmitButtonOnclick()">Submit</button>
        </div>

        <input type="hidden" name="username" id="username" value="@Model.Username"/>

        <fieldset>
            <legend>Edit Photos</legend>
            <div>
                Select profile picture:
                <input id="imageFile" type="file" name="imageFile" accept="image/png, image/jpeg" />
                @Html.CheckBoxFor(modelItem => modelItem.DefaultCover)<span>Remove profile photo</span>
            </div>
            <div>
                Select cover picture:
                <input id="coverFile" type="file" name="coverFile" accept="image/png, image/jpeg" />
                @Html.CheckBoxFor(modelItem => modelItem.DefaultCover)<span>RemoveCover</span>
            </div>
        </fieldset>
    }

任何提示、链接或代码示例都会很有用。
预先感谢！

你尝试过将 contentType 设置为 false 吗？ - Knelis
是的，但是仍然将 null 发送到服务器。 - Mojtaba
Ajax多文件上传脚本带有进度条，拖放Qq.FileUploader在Mvc 4 Razor中。 - Sender
3个回答
26

你可以使用除Jquery Ajax之外的其他方法

 <script>
            function SubmitButtonOnclick()
            { 
                var formData= new FormData();
                var imagefile=document.getElementById("imageFile").files[0];
                var coverfile=document.getElementById("coverFile").files[0];
                formData.append("imageFile",imageFile);
                formData.append("coverFile",coverFile);
                var xhr = new XMLHttpRequest();
                xhr.open("POST", "/Profile/EditProfile", true);
                xhr.addEventListener("load", function (evt) { UploadComplete(evt); }, false);
                xhr.addEventListener("error", function (evt) { UploadFailed(evt); }, false);
                xhr.send(formData);

            }

      function UploadComplete(evt) {
        if (evt.target.status == 200) 
                alert("Logo uploaded successfully.");

        else 
                 alert("Error Uploading File");
        }

    function UploadFailed(evt) {
        alert("There was an error attempting to upload the file.");

    }
 </script>

这对我有效！！

您的脚本已更改

 function SubmitButtonOnclick() {
        var formData = new FormData();
        var file = document.getElementById("imageFile").files[0];
        var file1 = document.getElementById("coverFile").files[0];
        formData.append("imageFile", file);
        formData.append("coverfile", file1);
        $.ajax({
            type: "POST",
            url: '@Url.Action("EditProfile","Default1")',
            data: formData,
            dataType: 'json',
            contentType: false,
            processData: false,
            success: function (response) {
                $('#GeneralSection').html(response.responseText);
            },
            error: function (error) {
                $('#GeneralSection').html(error.responseText);
            }
        });
    }
我将你的代码复制粘贴到我的脚本部分，但仍然向服务器端函数发送空数据（客户端显示成功提示）。 - Mojtaba
我已经尝试过仅对图像进行操作，它可以在你的ajax.beginform中工作，但是我不确定你是如何将数据发送到控制器的。 - Nilesh Gajare
我很困惑 :-) 即使没有其他数据字段，它对我也不起作用。 - Mojtaba
1
我已经更新了答案...不要使用jQuery来附加文件。 - Nilesh Gajare
1
你的建议对我很有帮助@Nilesh。谢谢 :-) 最终它可以在不再发布其他数据的情况下工作了。只需要将这一行代码：formData.append("imageFile", $("#imageFile").file); 替换为 formData.append("imageFile", file); 即可。谢谢。 :) - Mojtaba
显示剩余13条评论
4
   <input type="file" id="picfile" name="picf" />
       <input type="text" id="txtName" style="width: 144px;" />
 $("#btncatsave").click(function () {
var Name = $("#txtName").val();
var formData = new FormData();
var totalFiles = document.getElementById("picfile").files.length;

                    var file = document.getElementById("picfile").files[0];
                    formData.append("FileUpload", file);
                    formData.append("Name", Name);

$.ajax({
                    type: "POST",
                    url: '/Category_Subcategory/Save_Category',
                    data: formData,
                    dataType: 'json',
                    contentType: false,
                    processData: false,
                    success: function (msg) {

                                 alert(msg);

                    },
                    error: function (error) {
                        alert("errror");
                    }
                });

});

 [HttpPost]
    public ActionResult Save_Category()
    {
      string Name=Request.Form[1]; 
      if (Request.Files.Count > 0)
        {
            HttpPostedFileBase file = Request.Files[0];
         }


    }
0
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接