圖片目錄和對話框控制

最終發展成爲一個後端的幾個項目現在我在ASP.NEt深化發展的Web應用程序MVC 3圖片目錄和對話框控制

我有一個包含一些字段的窗體並可以上傳一個完美的圖像

我想現在給用戶從目錄中選擇圖像的可能性，所以我決定使用一個對話框，一旦點擊一個按鈕並選擇一個圖像，我已經能夠顯示一些圖像的對話框，但無法找到如何選擇圖像並將其綁定到我的視圖模型

下面是我在現在

public class PopupController : Controller 
{ 
    public ActionResult Index() 
    { 
     return View(); 
    } 
    public ActionResult ProductPartial() 
    { 
     ViewBag.Images = Directory.EnumerateFiles(Server.MapPath("~/images_upload")) 
          .Select(fn => "~/images_upload/" + Path.GetFileName(fn)); 
     return PartialView("_ProductPartial"); 
    } 
}

和意見

<script type="text/javascript" > 
$(function() { 
    $('#dialog').dialog({ 
     autoOpen: false, 
     width: screen.width/2, 
     height:screen.height/2, 
     resizable: false, 
     title: 'Product', 
     modal: true, 
     open: function(event, ui) { 
      $(this).load("@Url.Action("ProductPartial", "Popup")"); 
     }, 
     buttons: { 
      "Close": function() { 
       $(this).dialog("close"); 
      } 
     } 
    }); 
    $("#opener").click(function() { 
     $("#dialog").dialog("open"); 
    }); 
});

最後的局部視圖

@foreach(var image in (IEnumerable<string>)ViewBag.Images) 
{ 
<img src="@Url.Content(image)" alt="Hejsan" width="100" height="100" /> 
}

我的視圖模型包含此屬性的代碼

public HttpPostedFileBase imageVente { get; set; }

感謝

來源

2015-06-11 Coder1409

你展示服務器端圖像的列表，並允許用戶選擇一個。

爲此，您不需要HttpPostFileBase，它允許用戶從他們的PC上傳新的圖像。

文件名添加到圖像標籤：

@foreach(var image in (IEnumerable<string>)ViewBag.Images) 
{ 
    <img data-name='image' src="@Url.Content(image)" alt="Hejsan" width="100" height="100" class='selectable-image' /> 
}

一個隱藏字段添加到您的形式

<input type="hidden" name="selectedImage" id="selectedImage" />

添加一個onclick的圖像添加「選擇」類和填充隱藏字段

$(".selectable-image").click(function() 
{ 
    $(".selectable-image").removeClass("selected"); 
    $(this).addClass("selected"); 
    $("#selectedImage").val($(this).data("name")) 
});

在你的控制器action/viewmodel中，檢索到selectedImage name：

public string selectedImage { get; set; }

編輯：以上是從從服務器顯示一些圖像原來的問題。這允許用戶選擇圖像並將其傳遞迴服務器。

額外的評論澄清，HttpPostFileBase不是一個錯誤，並且要求也允許客戶端上傳。

在這種情況下，簡單地用名稱添加一個input type='file'到窗體符合參數：

<input type='file' name="imageVente">

我不是100％肯定，你可以使用它作爲一個模型屬性，但它的工作作爲一個參數上的操作：

[HttpPost] 
public ActionResult UploadImage(HttpPostedFileBase imageVente)

確保您form也有enctype="multipart/form-data"（檢查更多的細節上的文件上傳大量做題）。

來源

2015-06-11 08:56:14

感謝您的答案，它看起來合法，我使用兩個選項，其實，服務器端圖像和用戶上傳，我需要一個其他屬性呢？現在我將HttpPostFileBase轉換爲字節，然後將其保存到我的數據庫中 – Coder1409

在澄清後添加了編輯。 –

圖片目錄和對話框控制

回答

相關問題