Asp.Net MVC 在 Edit Get 中编辑上传的图片(HTTPPostedFileBase)
Posted
技术标签:
【中文标题】Asp.Net MVC 在 Edit Get 中编辑上传的图片(HTTPPostedFileBase)【英文标题】:Asp.Net MVC Edit an uploaded image (HTTPPostedFileBase) in Edit Get 【发布时间】:2014-06-21 09:42:21 【问题描述】:这是我第一次在 ASP.NET MVC 中处理文件上传,我已经能够上传图像、调整大小、将其保存到服务器、重命名 src-string 以使 src 为图片反映产品名称(例如:“ProductImages/Original/FIFA14.jpg”)。图像 src 也存储在数据库中,我使用该数据库通过 Url.Action() 在视图中显示图像。
对于我的编辑帖子,我希望用户能够像往常一样更改产品信息。并且每次用户提交表单时,之前上传的图片都会被新上传的图片文件覆盖。
当我进入编辑产品获取视图时,文件输入显示“未选择文件”。 我希望它显示用户从本地计算机创建产品之前上传的图像文件。
真的有办法吗?怎么办?
这是我在编辑视图中的文件输入:
<div class="form-group">
@html.LabelFor(model => model.ProductImageViewModel.ImageUpload, new @class = "control-label col-md-2" )
<div class="col-md-10">
<input type="file" name="imageUpload" id="imageUpload" />
@Html.ValidationMessageFor(model => model.ProductImageViewModel.ImageUpload)
</div>
</div>
Edit Get的Controller方法:
// GET: /Product/Edit/5
public ActionResult Edit(Guid id)
Product product = _productRepository.GetById(id);
var productViewModel = new ProductViewModel
Id = product.Id,
Name = product.Name,
Description1 = product.Description1,
Description2 = product.Description2,
Description3 = product.Description3,
Status = product.Status,
Image = product.Image,
Weight = product.Weight,
Price = product.Price,
ReleaseDate = product.ReleaseDate,
Category = product.Category,
Categories = GetCategoryDropDownListForEdit(product),
ProductStatuses = GetStatusDropDownListForEdit(product),
;
return View(productViewModel);
这就是我在创建方法中上传图片的方式:
// POST: /Product/Create
[HttpPost]
public ActionResult Create(ProductViewModel model, HttpPostedFileBase imageUpload)
if (UploadedFileIsValidImage(imageUpload))
byte[] productPicture = new byte[imageUpload.ContentLength];
imageUpload.InputStream.Read(productPicture, 0, imageUpload.ContentLength);
WebImage img = new WebImage(imageUpload.InputStream);
img.Resize(200, 200);
var fileName = imageUpload.FileName;
string imageName = model.Name;
string extension = Path.GetExtension(fileName);
var productImageFileName = imageName + extension;
img.FileName = productImageFileName;
var filePathOriginal = Server.MapPath("~/ProductImages/Originals");
var filePathThumbNail = Server.MapPath("~/ProductImages/ThumbNails");
string savedImageFileName = Path.Combine(filePathOriginal, productImageFileName);
img.Save(savedImageFileName);
model.ProductImageViewModel.ImageSrc = savedImageFileName;
model.Image = savedImageFileName;
try
var guid = new Guid(model.SelectedCategory);
_manager.AddProduct(
model.Name, model.Description1, model.Description2, model.Description3, Convert.ToDecimal(model.Price),
Convert.ToDateTime(model.ReleaseDate),
Convert.ToDouble(model.Weight), model.ProductImageViewModel.ImageSrc, guid);
_categoryRepository.Save();
return RedirectToAction("Index");
catch
return View();
else
model.Categories = CategoryDropDownListForCreate();
return View(model);
那么如何获取输入以在文件输入中显示该产品的当前上传文件?
【问题讨论】:
使用img标签显示,例如: 也许我的问题不够具体。我希望显示文件输入而不是“未选择文件”,而是显示创建产品时(从计算机)之前上传的文件的文件名。不是它在数据库中显示图像 src 的文件名。 【参考方案1】:您不能这样做,因为这是一个安全问题。如果您尝试通过 javascript 设置它 使用以下代码
<script type="text/javascript">
document.forms["form1"].elements["uploadImage"].value = "C:\Users\Public\Pictures\Sample Pictures\Chrysanthemum.jpg";
</script>
如果您可以检查您的浏览器控制台,它会输出错误消息说明
SecurityError: The operation is insecure.
【讨论】:
【参考方案2】:当输入的类型是“文件”时,你不能设置它的值。通常你会在编辑视图中添加一个链接来下载当前上传的文件。
【讨论】:
【参考方案3】:尝试这种方式(不是解决方案,而是一种解决方法),
在编辑视图中,并排显示上传图片的链接和图片上传控件。
如果用户想查看/预览上传的图片,可以使用图片链接。
用于亲密替换旧图像的新图像。您可以检查这是控制器Edit
方法。如果HttpPostedFileBase imageUpload
不为空,则更新,否则将模型保存到数据库中。
正如其他用户已经提到的,for security reason you cannot assign the path to input control.
【讨论】:
【参考方案4】:首先我将我的图像的 URl 保存在数据库中,然后我不得不绕过这个问题并用这个解决它
// Add this to your controller to check if the file is coming empty, If yes then I copy my previous Url to the new edited object
else if (file== null)
Product thisProduct = db.Products.Where(p => p.Id == product.Id).FirstOrDefault();
product.Url = thisProduct.Url;
if (ModelState.IsValid)
// had to use AddOrUpdate instead of Modified
db.Set<Product>().AddOrUpdate(product);
//db.Entry(product).State = EntityState.Modified;
db.SaveChanges();
return RedirectToAction("Index");
【讨论】:
以上是关于Asp.Net MVC 在 Edit Get 中编辑上传的图片(HTTPPostedFileBase)的主要内容,如果未能解决你的问题,请参考以下文章
带有 ADO .NET 的 ASP .NET MVC 会导致问题吗?
如何在 ASP.NET MVC 中通过 Ajax 提交表单?