0

ASP.NET MVC 3 アプリケーションを構築しています。jQuery ダイアログを使用して写真をアップロードしようとしています。ここに私のコードがありますが、問題はHttpPostedFileBase私のオブジェクトmodel（アップロードするファイルを表す魔女）がサーバー側（HttpPostメソッド）で常にnullであることです。

私のコントローラー

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

アップロードの部分ビュー (_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>
}

メインビュー

<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

この質問と回答を見つけたので、アプローチを変更し、HTML5 を使用して問題を解決することにしました。ありがとう、そして幸運を祈ります。

HTML5 では、Ajax と jQuery を使用してファイルをアップロードできます。それだけでなく、ファイルの検証 (名前、サイズ、MIME タイプ) を実行したり、HTML5 プログレス タグ (または div) を使用してプログレス イベントを処理したりできます。

于 2013-08-24T20:54:48.633 に答える
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 に答える
-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 に答える