使用ajax提交表单并提交防止和发送文件控制c#的选定文件

Question

在我的应用程序中，我有一个从局部视图呈现的表单。我想从该表单发送整个表单数据和选定的文件控制文件。表单提交使用 ajax 调用。要将所选文件保存到文件夹，我的代码如下：

JavaScript 函数：

<script type="text/javascript">
    $(function () {
        $('#careerForm').submit(function (e) {
            e.stopPropagation();
            e.preventDefault();

            var formData = new FormData();
            var totalFiles = document.getElementById("fuUploadCV").files.length;

            for (var i = 0; i < totalFiles; i++) {
                var file = document.getElementById("fuUploadCV").files[i];
                formData.append("FileUpload", file);
            }

            $.ajax({
                type: "POST",
                url: '/CareerSurface/UploadImage/', //put your controller/action here
                data: formData,
                dataType: 'json',
                contentType: false,
                processData: false,
                beforeSend: function (xhr) {
                    //do something before send
                },
                success: function (data) {
                    //do something if success
                },
                error: function (data) {
                    //do something if error
                }
            });
        });
    });
</script>

HTML：

using (Html.BeginForm("ApplyNow", "CareerSurface", FormMethod.Post, new { enctype = "multipart/form-data", autocomplete = "off", id ="careerForm" })){
    <div class="Field-Label-Box">
        <label>First Name:<span> *</span></label>
    </div>
    <div class="Field-Value-Box">
        @Html.TextBoxFor(model => model.FirstName, new {  id = "txtFirstName", name = "txtFirstName", required = "required" })
        @Html.ValidationMessageFor(model => model.FirstName)
    </div>
    ......
    <div class="Field-Label-Box">
        <label>Upload CV:<span> *</span></label>
    </div>
    <div class="Field-Value-Box">
        @Html.TextBoxFor(model => model.ResumeUpload, new { type = "file", id = "fuUploadCV", name = "fuUploadCV", required = "required" })</div>
    <input type="submit" id="btnSave" value="Submit" name="btnSave"  />

}

c#：

[HttpPost]
public void UploadImage()
{
    if (Request.Files.Count > 0)
    {
        dynamic file = Request.Files[0];
        //do something with your 'file'
    }
}

这非常适合仅发送选定的文件。现在我的问题是我想将所有其他数据（模型类对象）也发送到同一个控制器方法。我也尝试过使用 json，但出现“非法调用”错误。

请指导我如何将两者都传递给单一方法？如有任何疑问，请填写免费询问。帮帮我，我在这一点上卡住了。

谢谢。

Answer 1

我对您的代码进行了测试，您唯一缺少的是将其他字段添加到您通过 AJAX 发送的 FormData 对象。我的意思是像这样修改你的javascript代码：

var formData = new FormData();
var totalFiles = document.getElementById("fuUploadCV").files.length;
for (var i = 0; i < totalFiles; i++) {
   var file = document.getElementById("fuUploadCV").files[i];
   formData.append("FileUpload", file);
}

// This is what you are missing: adding the other form fields
var txtFirstName = $("#txtFirstName").val();
formData.append("txtFirstName", txtFirstName);

$.ajax({
    (... the rest of your code ...)

您需要附加要发送到服务器的表单的每个值。

然后在服务器端，您可以通过以下方式访问您的字段，同样基于您当前的代码：

[HttpPost]
public void UploadImage()
{
   if (Request.Files.Count > 0)
   {
      dynamic file = Request.Files[0];
      //do something with your 'file'

      // This is the way to access your fields based on your code
      string txtFirstName = Request.Form["txtFirstName"];
      // do something with your fields
   }
}

希望对你有帮助。