【发布时间】：2020-03-11 16:21:59
【问题描述】：
我有一个项目。有一个 Portfolio 页面，其中包含项目信息、项目相关类别、项目相关技术和项目相关图像。我希望将项目的图片一张一张添加，并在需要时删除。最后，当我按下保存按钮时，我希望将所有信息保存到数据库中，并将图片保存在一个文件夹中。
这是我的投资组合模型
public Portfolio()
{
this.Categories = new HashSet<Category>();
this.Technologies = new HashSet<Technology>();
this.Images = new HashSet<Image>();
}
public int Id { get; set; }
[Display(Name ="Project Name"),Required(ErrorMessage ="*")]
public string ProjectName { get; set; }
[Display(Name = "Date")]
public DateTime Date { get; set; }
[Display(Name = "Url")]
public string URL { get; set; }
[Display(Name = "Description")]
public string Description { get; set; }
public virtual ICollection<Technology> Technologies { get; set; }
public virtual ICollection<Category> Categories { get; set; }
public virtual ICollection<Image> Images { get; set; }
这是我的图像模型
public Image()
{
this.Portfolios = new HashSet<Portfolio>();
}
public int Id { get; set; }
public string URL { get; set; }
[NotMapped]
public HttpPostedFileBase[] files { get; set; }
public int PortfolioId { get; set; }
public virtual ICollection<Portfolio> Portfolios { get; set; }
这是我的创建动作
public ActionResult Create(Portfolio portfolio, string[] Cat, string[] Tech, HttpPostedFileBase img)
{
//TODO:Image add
if (ModelState.IsValid)
{
if (Cat != null)
{
portfolio.Categories = new List<Category>();
foreach (var item in Cat)
{
var categoryToAdd = context.Category.Find(int.Parse(item));
portfolio.Categories.Add(categoryToAdd);
}
}
if (Tech != null)
{
portfolio.Technologies = new List<Technology>();
foreach (var item in Tech)
{
var technologyToAdd = context.Technology.Find(int.Parse(item));
portfolio.Technologies.Add(technologyToAdd);
}
}
context.Portfolio.Add(portfolio);
context.SaveChanges();
return RedirectToAction("Index");
}
else
{
return View();
}
}
这是我的创建视图
<div class="card-body">
@using (Html.BeginForm("Create", "Portfolio", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
@Html.AntiForgeryToken()
<div class="form-group">
@Html.LabelFor(m => m.ProjectName, new { @class = "control-label" })
@Html.ValidationMessageFor(m => m.ProjectName, "", new { @class = "text-danger" })
@Html.EditorFor(s => s.ProjectName, new { htmlAttributes = new { @class = "form-control" } })
</div>
<div class="form-group">
@Html.LabelFor(m => m.Date, new { @class = "control-label" })
@Html.ValidationMessageFor(m => m.Date, "", new { @class = "text-danger" })
@Html.EditorFor(s => s.Date, new { htmlAttributes = new { @class = "form-control" } })
</div>
<div class="form-group">
@Html.LabelFor(m => m.URL, new { @class = "control-label" })
@Html.ValidationMessageFor(m => m.URL, "", new { @class = "text-danger" })
@Html.EditorFor(s => s.URL, new { htmlAttributes = new { @class = "form-control" } })
</div>
<div class="form-group">
@Html.LabelFor(m => m.Description, new { @class = "control-label" })
@Html.ValidationMessageFor(m => m.Description, "", new { @class = "text-danger" })
@Html.EditorFor(s => s.Description, new { htmlAttributes = new { @class = "form-control" } })
</div>
<div class="form-group">
@Html.LabelFor(m => m.Categories, new { @class = "control-label" })
@* @Html.ListBoxFor(m=>m.Categories,(IEnumerable<SelectListItem>)ViewBag.Cat)*@
@Html.ListBox("Cat", null, new { @class = "form-control" })
</div>
<div class="form-group">
@Html.LabelFor(m => m.Technologies, new { @class = "control-label" })
@* @Html.ListBoxFor(m=>m.Categories,(IEnumerable<SelectListItem>)ViewBag.Cat)*@
@Html.ListBox("Tech", null, new { @class = "form-control" })
</div>
<div class="form-group">
<script src="~/Scripts/jquery-2.1.3.min.js"></script>
<script>
//$(document).ready(function () {
// $("#fileButton").click(function () {
// var files = $("#fileInput").get(0).files;
// var fileData = new FormData();
// for (var i = 0; i < files.length; i++) {
// fileData.append("fileInput", files[i]);
// }
// $('#files').val(fileData);
// });
//});
$(document).ready(function () {
var i = 1;
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
var img = '<div id="imageItem' + i + '" style="position:relative;width:100px;">' +
'<i onclick="remove(\'imageItem' + i + '\')"' + 'style="position:absolute;right:5px;cursor:pointer;">X</i>' +
' <img src="' + e.target.result + '" width="100" /><input type="hidden" name="img" value="' + e.target.result + '" />' +
'</div>';
$('#imageList').append(img);
}
reader.readAsDataURL(input.files[0]);
i = i + 1;
}
}
$("#fu").change(function () {
readURL(this);
});
});
function remove(id) {
$('#' + id).remove();
}
</script>
<div class="form-group">
<div class="row">
<div class="col-6">
@Html.LabelFor(m => m.Images, new { @class = "control-label" })
<input type="file" id="fu" class="form-control" />
</div>
<div class="col-6">
<div id="imageList">
@*<div id="imageItem1" style="position:relative;width:100px;">
<i onclick="remove('imageItem1')" style="position:absolute;right:5px;cursor:pointer;">X</i>
<img src="~/images/portfolio/1.jpg" width="100" />
</div>*@
</div>
</div>
</div>
</div>
</div>
<div class="form-group row">
<div class="col-6">
<button class="btn btn-outline-success">Save</button>
</div>
<div class="col-6 text-right">
<a href="@Url.Action("Index","Portfolio")" class="text-primary text-decoration-none"><i class="fa fa-arrow-left text-primary"></i> Back To List</a>
</div>
</div>
}
</div>
和图片一样，我想先选择图片，然后点击保存按钮保存信息。 enter image description here
【问题讨论】：
-
问候@mert，我已经添加了在 .NET MVC 应用程序中保存图像或媒体文件的流程，如果您需要更多详细信息，请告诉我会相应地更新帖子。
标签： asp.net-mvc image-uploading image-preprocessing