我使用 ASP.NET Mvc 3 和 Microsoft.Web.Helpers NuGet包实现了图像文件上传。该实现很简单,因为它允许您浏览文件并将其上载到指定的目录。
以下是使用 ASP.NET MVC 3 和Microsoft.Web.Helpers NuGet 插件的图像上传解决方案。
现在是 ViewModel 代码
namespace MvcImageUpload.Models {
public class ImageUploadViewModel {
[UIHint("UploadedImage")]
public string ImageUrl { get; set; }
public string ImageAltText { get; set; }
}
}
现在对于控制器我只是把它放到了Home控制器中,因为这只是一个让它工作的模拟项目。我刚刚添加了ActionResult
,它将ImageUploadViewModel作为参数。
public ActionResult Upload(ImageUploadViewModel model) {
var image = WebImage.GetImageFromRequest();
if (image != null) {
if (image.Width > 500) {
image.Resize(500, ((500 * image.Height) / image.Width));
}
var filename = Path.GetFileName(image.FileName);
image.Save(Path.Combine("../Uploads/Images", filename));
filename = Path.Combine("~/Uploads/Images", filename);
model.ImageUrl = Url.Content(filename);
model.ImageAltText = image.FileName.Substring(0, image.FileName.Length - 4);
}
return View("Index", model);
}
我对图片上传的看法很简单,它有一个Html.BeginForm,它处理Post表单方法,编码类型设置为“multipart / form-data”。
然后使用Microsoft.Web.Helpers.FileUpload帮助程序,我从HTTP帖子请求一个图像,然后使用名为ImageViewer的自定义DisplayFor模板显示它。
@model MvcImageUpload.Models.ImageUploadViewModel
@using Microsoft.Web.Helpers;
@{
ViewBag.Title = "Index";
}
<h2>Image Uploader</h2>
@using (Html.BeginForm("Upload", "Home", FormMethod.Post,
new { @encType = "multipart/form-data" })) {
@FileUpload.GetHtml(initialNumberOfFiles: 1, allowMoreFilesToBeAdded: false,
includeFormTag: false, addText: "Add Files", uploadText: "Upload File") <br />
<input type="submit" name="submit"
value="Upload Image" text="Upload Images"
style="font-size: .9em;" />
@Html.DisplayFor(x => x, "ImageViewer")<br />
}
以下是自定义DisplayTemplate的样子
@model MvcImageUpload.Models.ImageUploadViewModel
@if (Model != null) {
<h4 style="color:Green;">Upload Success!</h4>
<p>
Alt Text has been set to <strong>@Model.ImageAltText</strong>
</p>
<img style="padding: 20px;"
src="@(String.IsNullOrEmpty(Model.ImageUrl) ? "" : Model.ImageUrl)"
id="uploadedImage" alt="@Model.ImageAltText"/>
}
这一切都有效,图像成功上传到表单帖子上的/Uploads/Images/FileName.extension。
我现在如何有另一个视图来显示该目录中的所有图像,分页并能够从视图和目录中选择,删除和图像?
我也知道Microsoft.Web.Helpers.FileUpload,支持上传多个文件,但我找不到如何使用我当前的解决方案实现这一点。任何帮助都会有很大的价值。
答案 0 :(得分:3)
点击“上传图片”按钮后,系统应调用使用Request
获取文件的方法。
[HttpPost]
public ActionResult Upload()
{
if(Request.Files != null && Request.Files.Count > 0)
{
for (int i = 0; i < request.Files.Count; i++)
{
var postFile = request.Files[i];
if (postFile != null && postFile.ContentLength > 0)
{
if (postFile.ContentLength < GetMaxRequestLength()) //10MB
{
var file = new ContractAttachment
{
Name = Path.GetFileName(postFile.FileName),
ContentType = postFile.ContentType,
FileLength = postFile.ContentLength,
FileData = GetStreamBuffer(postFile)
};
files.Add(file);
}
}
}
}
}
希望得到这个帮助。
答案 1 :(得分:1)
你问的是看起来而不是实现给我然后任何查询......
显示: 通过DirectoryInfo从上传/图像目录中获取所有图像...您可以根据某个扩展名搜索目录,然后它会为您提供一个可以迭代的结果集.....
创建一个视图,将所有记录显示为图像链接,并在控制器中将结果集提取到该视图....将这些记录绑定到您希望它们在VIEW中显示...
System.IO.DirectoryInfo info = new System.IO.DirectoryInfo("your directory path");
var filesinfo= info.GetFiles("*.jpg", System.IO.SearchOption.AllDirectories);
var filenum= filesinfo.GetEnumerator();
while (filenum.MoveNext())
{
//populate some entity like in your case you have ImageUploadViewModel
}
你可以使用Ajax实现删除逻辑,也可以通过post back实现你想要的方式....
Asp.net MVC Views遵循本教程,它将让您完成此操作....
但你要问的更像是实施代码而不是任何问题......
答案 2 :(得分:0)
我之前遵循的方法是将文件信息保存在数据库中(或任何适当的)。例如路径,文件名,内容类型,文件大小。 这使您在编辑时具有最大的灵活性(替代文字,标题,描述,与其他对象的关系)。 然后,可以通过创建一个只获取图像ID作为参数的ViewImage控制器,根据路径约定处理下载/查看文件。 然后,您可以从文件的路径构建URL,您只需要设置内容类型。 IIS然后完成剩下的工作。