0

I'm building an ASP.NET MVC 3 application, and I'm trying to use a jQuery Dialog to upload a photo. Here is my code, but the problem is that the HttpPostedFileBase object of my model (witch represent the file to upload) is always null on the server side (HttpPost method).

My controller

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 });
}

The model

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

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

The upload partial view (_UploadFile)

@model DalilCompany.Models.UploadImageModel

@using (Html.BeginForm("AddProductPhoto", "Product", FormMethod.Post,
        new { id = "uploadProductPhotoForm", enctype = "multipart/form-data" }))
{
    @Html.ValidationSummary(true)

    @Html.HiddenFor(m => m.ProductId)

    <div>
        @Html.LabelFor(m => m.File)
        @Html.TextBoxFor(m => m.File, new { type = "file" })
    </div>
}

main view

<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>
4

3 回答 3

0 
$(function(){
$("#JqPostForm").submit(function(e){    
   e.preventDefault();  

    $.post("process_form.php", $("#JqPostForm").serialize(),
    function(data){
        if(data.email_check == 'invalid'){

                $("#message_post").html("<div class='errorMessage'>Sorry " + data.name + ", " + data.email + " is NOT a valid e-mail address. Try again.</div>");
        } else {
            $("#message_post").html("<div class='successMessage'>" + data.email + " is a valid e-mail address. Thank you, " + data.name + ".</div>");
            }
    }, "json");    
});});

我建议你应该使用类似的东西来触发表单提交动作

于 2013-08-20T00:47:30.083 回答
0

我找到了这个问题和答案，我决定改变我的方法并使用 HTML5 来解决我的问题。谢谢，祝你好运。

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

于 2013-08-24T20:54:48.633 回答
-1

据我所知，您无法使用 $.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);
于 2013-08-20T03:16:18.333 回答