上传照片与jQuery对话框中ASP.NET MVC网站 [英] Upload photo with jQuery Dialog in ASP.NET MVC site

问题描述

我建立一个ASP.NET MVC 3应用程序，我想用一个jQuery对话框上传照片。这里是我的code，但问题是，我的模式（巫再$ p的 HttpPostedFileBase 对象$ psent上传的文件）总是在服务器端（ HttpPost 法）。

空

我的控制器

 公众的ActionResult AddProductPhoto（INT ID）
{
    VAR模型=新UploadImageModel {=产品编号ID};
    返回PartialView（_ UploadFile模型）;
}[HttpPost]
公众的ActionResult AddProductPhoto（UploadImageModel模型）
{
    // model.File总是空
    返回JSON（新{成功=真}）;
}
 

模型

 公共类UploadImageModel
{
    公众诠释产品编号{搞定;组; }    [FileExtensions（扩展=JPG，JPEG，PNG）]
    公共HttpPostedFileBase文件{搞定;组; }
}
 

上传局部视图（_UploadFile）

  @model DalilCompany.Models.UploadImageModel@using（Html.BeginForm（AddProductPhoto，产品，FormMethod.Post，
        新{ID =uploadProductPhotoForm，ENCTYPE =的multipart / form-data的}））
{
    @ Html.ValidationSummary（真）    @ Html.HiddenFor（M = GT; m.ProductId）    ＆LT; D​​IV＆GT;
        @ Html.LabelFor（M = GT; m.File）
        @ Html.TextBoxFor（M = GT; m.File，新的{type =文件}）
    ＆LT; / DIV＆GT;
}
 

主视图

 ＆LT;跨度的productId =@ Model.ProductIdID =add_product_photo_link＆GT;
    上传图片
＆LT; / SPAN＆GT;
＆LT; D​​IV ID =AddPhotoDlg称号=的风格=显示：无＆GT;＆LT; / DIV＆GT;＆LT;脚本类型=文/ JavaScript的＆GT;
    $（函数（）{
        $（＃AddPhotoDlg）。对话框（{
            的AutoOpen：假的，
            宽度：550，
            高度：250，
            模式：真实，
            纽扣： {
                上传：功能（）{
                    $。员额（/产品/ AddProductPhoto
                    $（＃uploadProductPhotoForm）。序列化（）
                    功能（）{
                        $（＃AddPhotoDlg）对话框（关闭）。
                        警报（'上传成功'）;
                    }）;
                    }，
                关闭：函数（）{$（本）.dialog（亲密）; }
            }
        }）;
    }）;    $（＃add_product_photo_link）。点击（函数（）{
        VAR ID = $（本）.attr（productId参数）;        $（＃AddPhotoDlg）。HTML（）
            .dialog（选项，标题，Ajouter UNE照片）
            .load（/产品/ AddProductPhoto /+ ID，
                函数（）{$（＃AddPhotoDlg）对话框（开放）。 }）;
    }）;
＆LT; / SCRIPT＆GT;
 

解决方案

我发现<一个href=\"http://stackoverflow.com/questions/166221/how-can-i-upload-files-asynchronously-with-jquery\">this问答，我已经决定要改变我的计算策略，并使用HTML5来解决我的问题。谢谢，祝你好运。

  

使用HTML5可以使文件上传使用Ajax和jQuery。不仅
  这一点，你可以做文件验证（名称，大小和MIME类型）或
  处理与HTML5进度标签的进度事件（或一个div）。

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>

解决方案

I found this question and answer, and I've decide to change my approch and use HTML5 to solve my problem. Thanks and good luck.

With HTML5 you CAN make file uploads with Ajax and jQuery. Not only that, you can do file validations (name, size, and MIME-type) or handle the progress event with the HTML5 progress tag (or a div).

这篇关于上传照片与jQuery对话框中ASP.NET MVC网站的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！