web-dev-qa-db-ja.com

画像をアップロードしてasp.netmvc4の同じページに表示する方法

私はasp.net mvc4およびrazor構文を使用してWebアプリケーションを開発しました。ファイルアップローダーを使用して画像をアップロードし、画像の詳細を同じページに表示する必要があります。

例として、"file uploader"および"submit button""contact page"アプリケーションの。人物の画像をアップロードしてclick送信ボタンを押すと、ページのどこかに画像が表示され、画像名やサイズなどの詳細が表示されます。

それを達成するための可能な方法はありますか？

これが私のコントローラークラスのコードです

public class FileUploadController : Controller
    {
        //
        // GET: /FileUpload/

        public ActionResult Index()
        {
            return View();
        }
        public ActionResult FileUpload()
        {
            return View();
        }

        [AcceptVerbs(HttpVerbs.Post)]
        public ActionResult FileUpload(HttpPostedFileBase uploadFile)
        {
            if (uploadFile.ContentLength > 0)
            {
                string filePath = Path.Combine(HttpContext.Server.MapPath("~/Img/"),
                                               Path.GetFileName(uploadFile.FileName));
            }
            return View();
        }
    }

ここにビューのコードがあります

<h2>FileUpload</h2>

     @(Html.BeginForm("FileUpload", "FileUpload",FormMethod.Post, new { enctype = "multipart/form-data" }))
        <input name="uploadFile" type="file" />
        <input type="submit" value="Upload File" />

しかし、ページに表示する方法は？

助けてください。

c#asp.net-mvc-4razorimage-upload
11
sanzy

アップロードしたファイルをコントローラーアクションからサーバーに保存したら、このファイルのURLをビューに戻して、<img>タグで表示できるようにします。

public class FileUploadController : Controller
{
    public ActionResult Index()
    {
        return View();
    }

    public ActionResult FileUpload()
    {
        return View();
    }

    [AcceptVerbs(HttpVerbs.Post)]
    public ActionResult FileUpload(HttpPostedFileBase uploadFile)
    {
        if (uploadFile.ContentLength > 0)
        {
            string relativePath = "~/img/" + Path.GetFileName(uploadFile.FileName);
            string physicalPath = Server.MapPath(relativePath);
            uploadFile.SaveAs(physicalPath);
            return View((object)relativePath);
        }
        return View();
    }
}

次に、ビューを強く入力し、モデルが空でない場合に画像を表示する<img>タグを追加します。

@model string
<h2>FileUpload</h2>

@using (Html.BeginForm("FileUpload", "FileUpload", FormMethod.Post, new { enctype = "multipart/form-data" })
{
    <input name="uploadFile" type="file" />
    <input type="submit" value="Upload File" />
}

@if (!string.IsNullOrEmpty(Model))
{
    <img src="@Url.Content(Model)" alt="" />
}
18
Darin Dimitrov

hTMLの場合：

_<input type='file' onchange="readURL(this);" />
_

タイプFileReaderによるJavascript/JQuery

_if (input.files && input.files[0]) {
    var reader = new FileReader();
    reader.onload = function (e) {
            $('#blah').attr('src', e.target.result);
        }
        reader.readAsDataURL(input.files[0]);
    }
_

ここで、inputは_<input type="file">_要素であり、AjaxToolKit AsyncFileUploadを使用する場合、次を使用して入力を取得できます：fileUploadElement.get_inputFile()

参照してください： アップロードの前後に画像をプレビューする方法？

4
Muhammad Omar ElShourbagy

アップロードした画像をページに表示するには、画像をどこかに保存してから、対応するURLを<img>タグで参照する必要があります。

Webサイト内のディスクに保存すると、保存場所に対応するURLで参照できます（Imgに保存すると、相対URLは~/Img/imagenameになります）。

データベースに保存する場合は、別のアクションメソッドまたはHttpHandlerを指定して取得する必要があります。

1
Andrey Shchekin