Cách tải lên hình ảnh và hiển thị trên cùng một trang trong asp.net mvc 4

Question

tôi đã phát triển một ứng dụng web sử dụng asp.net mvc4 và dao cạo cú pháp. tôi cần tải lên hình ảnh bằng cách sử dụng trình tải lên tệp và hiển thị trong cùng một trang với chi tiết của hình ảnh.

làm ví dụ có "file uploader" và "submit button" trong "contact page" đơn đăng ký của tôi. khi tôi tải lên hình ảnh của một người và click nút gửi, nó sẽ hiển thị hình ảnh ở đâu đó trong trang với các chi tiết của nó như tên hình ảnh, kích thước như vậy.

có cách nào có thể để đạt được điều đó không?

đây là mã cho lớp điều khiển của tôi

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

và đây là đoạn code để xem

<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" /> 

nhưng làm thế nào để hiển thị trên trang?

vui lòng trợ giúp.

Answer 1

Khi bạn lưu các tập tin được tải lên trên máy chủ từ controller action của bạn, bạn có thể vượt qua trở lại url cho tập tin này vào xem để nó có thể được hiển thị trong một <img> tag:

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

Sau đó làm cho bạn xem gõ mạnh và thêm một thẻ <img> đó sẽ hiển thị hình ảnh nếu mô hình này là không có sản phẩm nào:

@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="" /> 
} 

Answer 2

Vì vậy, đây là dòng chảy điển hình cho một cái gì đó như thế này.

1. Bạn bắt đầu hành động Index mà bạn có thể xem kiểm soát tải tệp.
2. Tệp tải lên ở dạng sẽ gửi cho hành động FileUpload của bạn.
3. Bên trong hành động FileUpload của bạn, bạn làm điều bạn và cuối cùng bạn return RedirectToAction("Index");

Bây giờ rõ ràng là có nhiều việc phải làm. Bạn cần lưu tệp đó ở đâu đó, giả sử trong một thư mục có tên là UploadStuff.

Trong hành động chỉ mục của bạn, bạn sẽ đọc thư mục đó cho tệp của mình.

Một lần nữa đây là để giúp bạn đi. Trong thế giới thực, bạn đang lưu trữ một tham chiếu đến tệp này trong cơ sở dữ liệu và truy vấn cơ sở dữ liệu đó dựa trên một số định danh duy nhất chẳng hạn như userId hoặc productId để tìm ra mục được tải lên nào được hiển thị trên chế độ xem chỉ mục.

Answer 3

Để hiển thị hình ảnh được tải lên trên trang, bạn sẽ phải lưu hình ảnh ở đâu đó, sau đó tham chiếu URL tương ứng trong thẻ <img>.

Nếu bạn lưu nó trên đĩa trong vị trí trang web, bạn có thể tham chiếu nó bằng URL tương ứng với vị trí lưu (vì vậy nếu bạn lưu nó vào Img URL tương đối sẽ là ~/Img/imagename).

Nếu bạn lưu nó vào cơ sở dữ liệu, bạn sẽ phải cung cấp một phương thức hành động riêng hoặc HttpHandler để tải xuống.

Answer 4

trong HTML:

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

Javascript/JQuery qua Type FileReader

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

nơi input là <input type="file"> yếu tố nếu bạn sử dụng AjaxToolKit AsyncFileUpload, bạn có thể lấy đầu vào sử dụng: fileUploadElement.get_inputFile()

hãy refere đến: how to preview a image before and after upload?