0

ユーザーが自分のプロフィール情報を編集できるビューがあります。ここには入力テキスト フィールドがあり、プロフィール画像を追加することもできます。これを行うには、次のようにかみそりで ASP .net MVC3 を使用して次のことを行いました。

ビューで:

@using (Html.BeginForm("SettingsWizard", "Business", FormMethod.Post, new { enctype = "multipart/form-data", id="SettingsForm" }))
        { 

            @Html.Partial("_UsrConfiguration", Model)

            @Html.Partial("_OtherPartialView")

            @Html.Partial("_OtherPartialViewTwo")


            <p class="textAlignRight">
                <input type="submit" class="bb-140" id="button7" value="Save"/>
    </p>
            <div class="clear"></div>
        }

_UsrConfiguration 部分ビューで画像を処理します。

<div class="floatRight" >
    <a onclick="javascript:opendialogbox('imageLoad2');" style="cursor: pointer">Foto</a>
    <img src="../../Content/themes/base/images/icons/zoom.png" width="16" height="16" id="imgThumbnail2" alt="foto" />
    <input type="file" name="imageLoad2" accept="image/*" id="imageLoad2" onchange="ChangeProfileImage()" hidden="hidden" />
</div>

これらのスクリプトでは:

<script type="text/javascript">
function ChangeProfileImage() {
        var ext = document.getElementById('imageLoad2').value.match(/\.(.+)$/)[1];
        switch (ext.toLowerCase()) {
            case 'jpg':
            case 'bmp':
            case 'png':
            case 'gif':
            case 'jpeg':
                {
                    var myform = document.createElement("form");
                    myform.style.display = "none";
                    myform.action = "/ImagePreview/ProfileImageSubmit";
                    myform.enctype = "multipart/form-data";
                    myform.method = "post";
                    var imageLoad;
                    var imageLoadParent;
                    var is_chrome = /chrome/.test(navigator.userAgent.toLowerCase());
                    if (is_chrome && document.getElementById('imageLoad2').value == '')
                        return; //Chrome bug onchange cancel
                    if (document.all || is_chrome) {//IE
                        imageLoad = document.getElementById('imageLoad2');
                        imageLoadParent = document.getElementById('imageLoad2').parentNode;
                        myform.appendChild(imageLoad);
                        document.body.appendChild(myform);
                    }
                    else {//FF
                        imageLoad = document.getElementById('imageLoad2').cloneNode(true);
                        myform.appendChild(imageLoad);
                        document.body.appendChild(myform);
                    }
                    $(myform).ajaxSubmit({ success:
                        function (responseText) {
                            var d = new Date();
                            $("#imgThumbnail2")[0].src = "/ImagePreview/ProfileImageLoad?a=" + d.getMilliseconds();
                            if (document.all || is_chrome)//IE
                                imageLoadParent.appendChild(myform.firstChild);
                            else//FF                     
                                document.body.removeChild(myform);
                        }
                    });
                }
                break;
            default:
                alert('File type error…');
        }

    }
</script>

コントローラ側で画像を処理する:

[AcceptVerbs(HttpVerbs.Post)]
public ActionResult ProfileImageSubmit(int? id)
{
Session["ContentLength"] = Request.Files[0].ContentLength;
        Session["ContentType"] = Request.Files[0].ContentType;
        byte[] b = new byte[Request.Files[0].ContentLength]; 
        Request.Files[0].InputStream.Read(b, 0, Request.Files[0].ContentLength); 
        //DB saving logic and persist data with…
    repo.Save();

        return Content(Request.Files[0].ContentType + ";" + Request.Files[0].ContentLength);
}

public ActionResult ProfileImageLoad(int? id)
{

    TCustomer usr = new TCustomer();
        usr = repo.load(User.Identity.Name);
byte[] b = usr.ContactPhoto; 
        string type = (string)Session["ContentType"];
    Response.Buffer = true;
        Response.Charset = "";
        Response.Cache.SetCacheability(HttpCacheability.NoCache);
        Response.ContentType = type;
        Response.BinaryWrite(b);
        Response.Flush();
        Response.End();
        Session["ContentLength"] = null;
        Session["ContentType"] = null; 
        return Content("");
}

これはうまくいきます。問題は、ユーザーが自分のプロフィールに画像を追加すると、

<input type="submit" class="bb-140" id="button7" value="Save"/>

ボタンは何もしません。ただし、ユーザーが画像を追加せずにプロファイルを編集すると、入力ボタンは本来の方法で送信されます。を使用して入力のクリック機能をバインドしてみました

$(document).on('click','#button7',function(e){
  $("#SettingsForm").submit();
});

しかし、問題は解決しませんでした...この問題について何か助けていただければ幸いです。

4

1 に答える 1

0

画像アップロードのフォームをそのままの方法で処理している理由がわかりません。ビューには 2 つのフォームしかありません。私たちは問題なくそれをやっています。各フォームにデータが必要なすべての要素が含まれていることを確認してください。両方のフォームで 1 つの要素を使用するには、非表示の入力を作成してもう一方をミラーリングし、jQuery を使用して値を最新の状態に保ちます。

うーん...問題が見え始めています。物事をレイアウトする方法として、私が提案した 2 番目のフォームは元のフォーム内にネストされます。同じフォームにいくつかの送信ボタンがある回避策がある場所があります。ボタンは次のようになります。

    <input type="submit" value=" Save Changes " name="submitButton" />

次に、私のアクションでは、次の署名を使用します。

    [HttpPost]
    public ActionResult ProcessForm(FormCollection collection)

そして、どのボタンがクリックされたかを調べます:

    string submitCommand = collection["submitButton"];

次に、switch(submitCommand) ブロックを作成し、ボタンに対して適切なアクションを実行します。あなたの場合、アクション署名を作成する必要があります：

    [HttpPost]
    public ActionResult ProcessForm(FormCollection collection, HttpPostedFileBase file)

画像の保存ボタンがクリックされたときにファイルオブジェクトを保存するようにします。これが機能することを保証することはできませんが、かなり確信しています。

そうでない場合、醜い回避策は、写真をアップロードするためのフォームを、プロフィールを更新するためのフォームから分離することです。それはきれいではありません...ただし、画像フォームをダイアログ（メインフォームの外側）に配置し、jQueryダイアログで開くことで実行できる場合があります。

これが理にかなっていることを願っています。

于 2012-09-18T16:03:02.517 に答える