图片目录和对话框控制

最终发展成为一个后端的几个项目现在我在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

在澄清后添加了编辑。 –

图片目录和对话框控制

回答

相关问题