1

だから私はajaxファイルのアップロードを部分的に（Jquery Formプラグインを使用して）持っています、それは完全に機能していますが、ファイルのアップロード後にモデル値を更新するのかわかりません

<div>
   @Html.Partial("PhotoUpload", Model.Place)
</div>

ここでは、パーシャルと呼び、モデルの一部を提供しています。

@model PlaceMap.DAL.Entities.Place
@using (Html.BeginForm("PhotoUpload", "Place", FormMethod.Post, new { @id = "photoUpload", enctype = "multipart/form-data" }))
{
    {
        @Html.ValidationSummary(true, "Image upload was unsuccessful")
        @Html.HiddenFor(m => m.Photo)                                                                                                                                                                                  
        <input type="file" id="file" name="file"/>
        <input type="submit" id="sbm" />
    }
}

これは、アップロード用の部分的な受け入れモデルとフォームのビューコードです

var options = {
    url: "/Place/PhotoUpload",
    dataType: "json",
    clearForm: true,
    resetForm: true,
    success: showResponse
};

function showResponse(responseText, statusText, xhr, $form)
{
    $('#photo').append('<img src="/Images/Places/' + responseText.Photo + '" />');
}

$('#photoUpload').submit(function ()
{
    $('#photoUpload').ajaxSubmit(options);
    return false;
});

プラグインのJavascriptコード

    [Authorize]
    [HttpPost]
    public ActionResult PhotoUpload(string Photo, HttpPostedFileBase file)
    {
        try
        {
            using (var ms = new MemoryStream())
            {
                //some logic here
                return Json(new { Photo = filename });
            }

        }
        catch (ArgumentException)
        {

        }

        return PartialView();
    }

コントローラのアクションコード。ファイル名を返し、js関数 "showResponse"に移動し、画像をdivに追加します。すべて完璧に動作しますが、@ Modelにファイル名を書き込む必要があります。この部分の写真で、その方法がわかりません。助言がありますか？

4

1 に答える 1

1

1つの可能性はtext/plain、サーバーから使用することです。

return Json(new { Photo = filename }, "text/plain");

クライアントで手動で解析します。

function showResponse(responseText, statusText, xhr, $form) {
    var data = $.parseJSON(responseText);
    $('#photo').append('<img src="/Images/Places/' + data.Photo + '" />');
}

dataType: 'json'明らかに、これが機能するためのオプションを削除する必要があります。

もう1つの可能性は、ドキュメントで説明されている内容に従い、JSON応答を<textarea>タグでラップするカスタムアクションの結果を作成することです。

XMLHttpRequestレベル2をサポートするブラウザーは、ファイルをシームレスにアップロードでき、アップロードが進むにつれて進行状況の更新を取得することもできます。古いブラウザの場合、XMLHttpRequestオブジェクトのレベル1の実装を使用してファイルをアップロードすることはできないため、iframeを含むフォールバックテクノロジが使用されます。これは一般的なフォールバック手法ですが、固有の制限があります。iframe要素は、フォームの送信操作のターゲットとして使用されます。これは、サーバーの応答がiframeに書き込まれることを意味します。これは、応答タイプがHTMLまたはXMLの場合は問題ありませんが、応答タイプがスクリプトまたはJSONの場合は同様に機能しません。どちらにも、HTMLマークアップで見つかった場合にエンティティ参照を使用して表現する必要のある文字が含まれていることがよくあります。

iframeモードを使用する場合のスクリプトおよびJSON応答の課題を説明するために、フォームプラグインでは、これらの応答をtextarea要素に埋め込むことができます。ファイルのアップロードなどと組み合わせて使用​​する場合は、これらの応答タイプに対してこれを行うことをお勧めします。ブラウザ。ただし、フォームにファイル入力がない場合、リクエストは通常​​のXHRを使用してフォームを送信することに注意してください（iframeではありません）。これにより、テキストエリアを使用する場合と使用しない場合を知るためにサーバーコードに負担がかかります。必要に応じて、プラグインのiframeオプションを使用して、プラグインに常にiframeモードを使用させることができます。そうすれば、サーバーは常に応答をテキストエリアに埋め込むことができます。ただし、推奨される解決策は、「X-Requested-With」リクエストヘッダーをテストすることです。そのヘッダーの値が「XMLHttpRequest」の場合

于 2012-05-14T12:36:06.990 に答える