image - MVC 4 での画像のアップロード/表示

Question

Entity Framework を使用してデータベースから画像をアップロード/表示する方法に関する段階的なチュートリアルを知っている人はいますか? コードスニペットをチェックアウトしましたが、それがどのように機能するかはまだ明確ではありません。アップロードフォームを書く以外に道に迷っているので、コードはありません。どんな（そして私が意味する）助けも大歓迎です。

余談ですが、このトピックを扱った本がないのはなぜですか? 私は Pro ASP.NET MVC 4 と Professional MVC4 の両方を持っていますが、彼らはそれについて言及していません。

score 144 · Accepted Answer

以下をご覧ください

@using (Html.BeginForm("FileUpload", "Home", FormMethod.Post, 
                            new { enctype = "multipart/form-data" }))
{  
    <label for="file">Upload Image:</label> 
    <input type="file" name="file" id="file" style="width: 100%;" /> 
    <input type="submit" value="Upload" class="submit" /> 
}

コントローラーには、受け入れるアクションメソッドが必要HttpPostedFileBaseです。

 public ActionResult FileUpload(HttpPostedFileBase file)
    {
        if (file != null)
        {
            string pic = System.IO.Path.GetFileName(file.FileName);
            string path = System.IO.Path.Combine(
                                   Server.MapPath("~/images/profile"), pic); 
            // file is uploaded
            file.SaveAs(path);

            // save the image path path to the database or you can send image 
            // directly to database
            // in-case if you want to store byte[] ie. for DB
            using (MemoryStream ms = new MemoryStream()) 
            {
                 file.InputStream.CopyTo(ms);
                 byte[] array = ms.GetBuffer();
            }

        }
        // after successfully uploading redirect the user
        return RedirectToAction("actionname", "controller name");
    }

更新 1

非同期で jQuery を使用してファイルをアップロードする場合は、この記事を試してください。

サーバー側（複数のアップロード用）を処理するコードは次のとおりです。

 try
    {
        HttpFileCollection hfc = HttpContext.Current.Request.Files;
        string path = "/content/files/contact/";

        for (int i = 0; i < hfc.Count; i++)
        {
            HttpPostedFile hpf = hfc[i];
            if (hpf.ContentLength > 0)
            {
                string fileName = "";
                if (Request.Browser.Browser == "IE")
                {
                    fileName = Path.GetFileName(hpf.FileName);
                }
                else
                {
                    fileName = hpf.FileName;
                }
                string fullPathWithFileName = path + fileName;
                hpf.SaveAs(Server.MapPath(fullPathWithFileName));
            }
        }

    }
    catch (Exception ex)
    {
        throw ex;
    }

このコントロールは、(javascript コールバックで) 画像名も返します。これを使用して、DOM に画像を表示できます。

更新 2

または、 MVC 4 で Async File Uploads を試すこともできます。

score 46 · Accepted Answer

ここに短いチュートリアルがあります:

モデル：

namespace ImageUploadApp.Models
{
    using System;
    using System.Collections.Generic;

    public partial class Image
    {
        public int ID { get; set; }
        public string ImagePath { get; set; }
    }
}

意見：

作成：

@model ImageUploadApp.Models.Image
@{
    ViewBag.Title = "Create";
}
<h2>Create</h2>
@using (Html.BeginForm("Create", "Image", null, FormMethod.Post, 
                              new { enctype = "multipart/form-data" })) {
    @Html.AntiForgeryToken()
    @Html.ValidationSummary(true)
    <fieldset>
        <legend>Image</legend>
        <div class="editor-label">
            @Html.LabelFor(model => model.ImagePath)
        </div>
        <div class="editor-field">
            <input id="ImagePath" title="Upload a product image" 
                                  type="file" name="file" />
        </div>
        <p><input type="submit" value="Create" /></p>
    </fieldset>
}
<div>
    @Html.ActionLink("Back to List", "Index")
</div>
@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

インデックス (表示用):

@model IEnumerable<ImageUploadApp.Models.Image>

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

<p>
    @Html.ActionLink("Create New", "Create")
</p>
<table>
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.ImagePath)
        </th>
    </tr>

@foreach (var item in Model) {
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.ImagePath)
        </td>
        <td>
            @Html.ActionLink("Edit", "Edit", new { id=item.ID }) |
            @Html.ActionLink("Details", "Details", new { id=item.ID }) |
            @Ajax.ActionLink("Delete", "Delete", new {id = item.ID} })
        </td>
    </tr>
}

</table>

コントローラー (作成)

public ActionResult Create(Image img, HttpPostedFileBase file)
{
    if (ModelState.IsValid)
    {
        if (file != null)
        {
            file.SaveAs(HttpContext.Server.MapPath("~/Images/") 
                                                  + file.FileName);
            img.ImagePath = file.FileName;
        }  
        db.Image.Add(img);
        db.SaveChanges();
        return RedirectToAction("Index");
    }
    return View(img);
}

これが役立つことを願っています:)

score -16 · Accepted Answer

        <input type="file" id="picfile" name="picf" />
       <input type="text" id="txtName" style="width: 144px;" />
 $("#btncatsave").click(function () {
var Name = $("#txtName").val();
var formData = new FormData();
var totalFiles = document.getElementById("picfile").files.length;

                    var file = document.getElementById("picfile").files[0];
                    formData.append("FileUpload", file);
                    formData.append("Name", Name);

$.ajax({
                    type: "POST",
                    url: '/Category_Subcategory/Save_Category',
                    data: formData,
                    dataType: 'json',
                    contentType: false,
                    processData: false,
                    success: function (msg) {

                                 alert(msg);

                    },
                    error: function (error) {
                        alert("errror");
                    }
                });

});

 [HttpPost]
    public ActionResult Save_Category()
    {
      string Name=Request.Form[1]; 
      if (Request.Files.Count > 0)
        {
            HttpPostedFileBase file = Request.Files[0];
         }


    }

image - MVC 4 での画像のアップロード/表示

3 に答える 3

更新 2

Related

Reference