Javascript 在ASP.NET MVC站点中使用jQuery对话框上载照片

我正在构建一个ASP.NETMVC3应用程序，并尝试使用jQuery对话框上传照片。这是我的代码，但问题是我的

模型

的

HttpPostedFileBase

对象（代表要上载的文件）在服务器端总是空的（

HttpPost

方法）

我的控制器

public ActionResult AddProductPhoto(int id)
{
    var model = new UploadImageModel {ProductId = id};
    return PartialView("_UploadFile", model);
}

[HttpPost]
public ActionResult AddProductPhoto(UploadImageModel model)
{
    // model.File is always null
    return Json(new { Success = true });
}

模型

public class UploadImageModel
{
    public int ProductId { get; set; }

    [FileExtensions(Extensions = "jpg, jpeg, png")]
    public HttpPostedFileBase File { get; set; }
}

上载部分视图（\u UploadFile）

@model dallcompany.Models.UploadImageModel
@使用（Html.BeginForm（“AddProductPhoto”、“Product”、FormMethod.Post、，
新的{id=“uploadProductPhotoForm”，enctype=“multipart/form data”}）
{
@Html.ValidationSummary（true）
@Html.HiddenFor（m=>m.ProductId）
@LabelFor（m=>m.File）
@TextBoxFor（m=>m.File，新的{type=“File”}）
}

主视图

<span productId ="@Model.ProductId" id="add_product_photo_link">
    Upload photo
</span>
<div id="AddPhotoDlg" title="" style="display: none"></div>

<script type="text/javascript">
    $(function () {
        $("#AddPhotoDlg").dialog({
            autoOpen: false,
            width: 550,
            height: 250,
            modal: true,
            buttons: {
                "Upload": function () {
                    $.post("/Product/AddProductPhoto",
                    $("#uploadProductPhotoForm").serialize(),
                    function () {
                        $("#AddPhotoDlg").dialog("close");
                        alert('upload success');
                    });
                    },
                "Close": function () { $(this).dialog("close"); }
            }
        });
    });

    $("#add_product_photo_link").click(function () {
        var id = $(this).attr("productId");

        $("#AddPhotoDlg").html("")
            .dialog("option", "title", "Ajouter une photo")
            .load("/Product/AddProductPhoto/" + id,
                function () { $("#AddPhotoDlg").dialog("open"); });
    });                                         
</script>

上传照片
$（函数（）{
$（“#AddPhotoDlg”）。对话框({
自动打开：错误，
宽度：550，
身高：250，
莫代尔：是的，
按钮：{
“上传”：函数（）{
$.post（“/Product/AddProductPhoto”，
$（“#uploadProductPhotoForm”）.serialize（），
函数（）{
$（“#AddPhotoDlg”）。对话框（“关闭”）；
警报（“上传成功”）；
});
},
“Close”：函数（）{$（this）.dialog（“Close”）；}
}
});
});
$（“#添加#产品#照片#链接”）。单击（功能（）{
var id=$（this.attr（“productId”）；
$（“#AddPhotoDlg”）.html（“”）
.对话框（“选项”、“标题”、“照片”）
.load（“/Product/AddProductPhoto/”+id，
函数（）{$（“#AddPhotoDlg”）.dialog（“open”）；}；
});                                         

$（函数（）{
$（“#JqPostForm”）.submit（函数（e）{
e、 预防默认值（）；
$.post（“process_form.php”，$（“#JqPostForm”）.serialize（），
功能（数据）{
如果（data.email\u check==‘无效’）{
$（“#message_post”）.html（“对不起”+data.name+，“+data.email+”不是有效的电子邮件地址。请重试。”）；
}否则{
$（“#message_post”）.html（“+data.email+”是有效的电子邮件地址。谢谢，“+data.name+”）；
}
}“json”）；
});});

---

我建议您应该使用类似的方法来触发表单提交操作

据我所知，您不能使用$.post或Jquery的ajax上传文件。所以

$("#uploadProductPhotoForm").serialize()

不序列化文件输入

您可以在提交功能中执行以下操作：

使用javascript获取文件输入：

var fileInput = document.getElementById("IdOfYourFileInput");

它将有一个

files

属性，其中包含所选文件，然后您可以使用

FormData

和

XMLHttpRequest

var form = new FormData();
form.append("NameOfTheInput", fileInput.files[0]);
form.append("NameOftheId", id);//this is your productId
var xhr = new XMLHttpRequest();
xhr.open("POST", "/Product/AddProductPhoto/", true):
xhr.send(form);

我发现了，我决定改变我的方法，用HTML5来解决我的问题。谢谢，祝你好运

使用HTML5，您可以使用Ajax和jQuery上传文件。不仅 您可以进行文件验证（名称、大小和MIME类型）或 使用HTML5进度标记（或div）处理进度事件

---

我不需要“提交表单”按钮，我在“上传”按钮中处理它（参见对话框的定义）。另外，通过调试，我找到了HttpPost方法。。。

var fileInput = document.getElementById("IdOfYourFileInput");

var form = new FormData();
form.append("NameOfTheInput", fileInput.files[0]);
form.append("NameOftheId", id);//this is your productId
var xhr = new XMLHttpRequest();
xhr.open("POST", "/Product/AddProductPhoto/", true):
xhr.send(form);