actionresult への ajax 呼び出しを行うことができ、そこから画像の名前が返され、ajax 呼び出しが成功すると画像が変更されます。別の方法として、私のプロジェクトで実装したこのことを行うこともできます。HTML フォームを次のように作成します。
@using (Html.BeginForm("ActionResult", "Controller", FormMethod.Post, new { @id = "ImgForm", @enctype = "multipart/form-data", name = "ImgForm", target = "UploadTarget" }))
{
}
フォームのターゲットとして iframe を作成します
<iframe id="UploadTarget" name="UploadTarget" onload="UploadImage_Complete();" style="position: absolute;
left: -999em; top: -999em;"></iframe>
アップロード コントロール
次に、画像をアップロードしてフォームに表示します
function UploadImage() {
$("#ImgForm").submit(); //form id
}
function UploadImage_Complete() {
try {
//Check to see if this is the first load of the iFrame
if (isFirstLoad == true) {
isFirstLoad = false;
return;
}
//Reset the image form so the file won't get uploaded again
document.getElementById("ImgForm").reset();
//Grab the content of the textarea we named jsonResult . This shold be loaded into
//the hidden iFrame.
var newImg = $.parseJSON($("#UploadTarget").contents().find("#jsonResult")[0].innerHTML);
if (newImg.IsValid) {
document.getElementById("dp").src = newImg.ImagePath;
document.getElementById('profile-pic').src = newImg.ThumbnailPath;
document.getElementById("change").style.display = "block";
}
// If there was an error, display it to the user
if (newImg.IsValid == false) {
alert(newImg.Message);
return;
}
}
catch (e) {
}
}
アクションは次のようになります
public WrappedJsonResult ChangeImage(HttpPostedFileBase file)
{
}
WrappedJsonResult クラスは次のようになります
public class WrappedJsonResult : JsonResult
{
public override void ExecuteResult(ControllerContext context)
{
context.HttpContext.Response.Write("<html><body><textarea id=\"jsonResult\" name=\"jsonResult\">");
base.ExecuteResult(context);
context.HttpContext.Response.Write("</textarea></body></html>");
context.HttpContext.Response.ContentType = "text/html";
}
}