[image] MVC 4에서 이미지 업로드 / 표시

Program / 글쓴이

Entity Framework를 사용하여 데이터베이스에서 이미지를 업로드 / 표시하는 방법에 대한 단계별 자습서를 아는 사람이 있습니까? 코드 스 니펫을 확인했지만 작동 방식이 아직 명확하지 않습니다. 코드가 없습니다. 업로드 양식을 작성하는 것 외에는 길을 잃었습니다. 어떤 (그리고 나는 어떤) 도움도 대단히 감사합니다.

참고로이 주제를 다루는 책이없는 이유는 무엇입니까? 나는 Pro ASP.NET MVC 4와 Professional MVC4를 모두 가지고 있으며 그들은 그것에 대해 언급하지 않습니다.

답변

다음을보세요

@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에서 비동기 파일 업로드를 시도 할 수 있습니다 .

답변

다음은 짧은 튜토리얼입니다.

모델:

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

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

전망:

  1. 창조하다:

    @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")
}

  2. 색인 (디스플레이 용) :

    @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>

  3. 컨트롤러 (생성)

    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);
}

이것이 도움이되기를 바랍니다 🙂

답변

        <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];
         }


    }

답변