上传和查看文件ASP.NET MVC 5

时间:2014-03-23 14:33:06

标签: c# asp.net asp.net-mvc

我有这段代码:

    [HttpPost]
    public ActionResult Create(Knowledgebase KB, HttpPostedFileBase file)
    {
        var KBFilePath = "";
        if (ModelState.IsValid)
        {
            if (file.ContentLength > 0)
            {
                var fileName = Path.GetFileName(KB.KnowledgebaseTitle);
                var path = Path.Combine(Server.MapPath("~/Resources/KBArticles"), fileName + ".pdf");
                KBFilePath = path;
                file.SaveAs(path);
            }
            KB.KnowledgebaseLink = KBFilePath;
            db.Knowledgebases.Add(KB);
            db.SaveChanges();
            return RedirectToAction("Index", "Home");
        }

        else
        {
            return View();
        }

链接是存储在以C:/

开头的DB中的文件路径

在另一个页面上,我可以查看记录的内容。当我点击其保存在C:/上的链接时,Chrome会显示“无法加载本地资源”。我保存到Resources文件夹中,该文件夹是我的ASP.NET应用程序目录的一部分。无论如何围绕这个?

EDIT 该页面由此视图提供:

public ActionResult Suggestions(String Tag)
{
      return View();
}

编辑2 - 我将更改放在我的视图中:

@{
string tag = "<td><a href=" + "~/Content/Files/" + ">" + item.Title.Replace(" ", "") + ".pdf" + "</a>" + "</td>";
 }
 @Html.Raw(tag)

浏览器地址栏中请求的文件是

http://localhost:62165/Incident/~/Content/Files/

现在我收到HTTP错误404.0未找到错误

3 个答案:

答案 0 :(得分:19)

这是一个完整的示例,展示了如何上传文件并通过链接将其下载。

创建一个空的MVC项目。 我使用MVC 4,但它应该适用于MVC 5.

<强>控制器:

HomeController我们将有一个操作Index,它会显示可供下载的文件列表以及上传新文件的选项。

行动Index获取:

  • 找到&#39;内容/文件/&#39;。
  • 的路径
  • 获取该文件夹中所有文件的列表。
  • 使用该列表作为Index视图的模型。

行动Index POST:

  • 找到&#39;内容/文件/&#39;。
  • 的路径
  • 创建一个临时数组来存储文件的内容。
  • 将内容读入缓冲区。
  • 将内容写入文件夹&#39;内容/文件/&#39;。

代码:

public class HomeController : Controller
{
    public ActionResult Index()
    {
        var path = Server.MapPath("~/Content/Files/");

        var dir = new DirectoryInfo(path);

        var files = dir.EnumerateFiles().Select(f => f.Name);

        return View(files);
    }

    [HttpPost]
    public ActionResult Index(HttpPostedFileBase file)
    {
        var path = Path.Combine(Server.MapPath("~/Content/Files/"), file.FileName);

        var data = new byte[file.ContentLength];
        file.InputStream.Read(data, 0, file.ContentLength);

        using (var sw = new FileStream(path, FileMode.Create))
        {
            sw.Write(data, 0, data.Length);
        }

        return RedirectToAction("Index");
    }

}

查看:

在视图中,我们需要生成一个包含文件链接的列表。在这里,我们需要处理包含空格的文件名,并将其替换为&#39;%20&#39;。

上传文件的表单很简单。只是一个输入标签来获取文件和一个按钮来发送表单。

@model IEnumerable<string>

@{
    ViewBag.Title = "Index";
}

<h2>Files</h2>

<ul>
    @foreach (var fName in Model)
    {
        var name = fName;
        var link = @Url.Content("~/Content/Files/") + name.Replace(" ", "%20");

        <li>
            <a href="@link">@name</a>
        </li>
    }
</ul>

<div>
    @using (Html.BeginForm("Index", "Home", FormMethod.Post, new { enctype = "multipart/form-data" }))
    {
        <input type="File" name="file" id="file" value="Choose File"/>
        <button type="submit">Upload</button>
    }
</div>

结果应为:

Index view

答案 1 :(得分:3)

尝试将文件保存在“内容”文件夹中。您可以创建子文件夹Content / Files。把文件放在那里。然后生成如下链接:

<a href="~/Content/Files/file1.pdf">File1</a>

如果您想直接下载,请使用下载属性:

<a href="~/Content/Files/file1.pdf" download>File1</a>

大多数Web服务器都配置为拒绝对内容文件夹之外的内容的请求。这可以在配置文件中修改,但如果您使用内容文件夹,则更容易(也更安全)。 这是基于我的经验,如果有人认为我错了,请让我知道我的答案。我总是很高兴学到新东西。

编辑1:如何动态构建a标记

在视图中,您需要一个字符串变量link,其中包含您要显示的链接的文本,另一个变量path用于保存路径(可能两者都是从控制器中的db加载) 。然后你可以像这样手动构建标签:

@{
    string tag = "<a href=" + path + ">" + link + "</a>";
}

@Html.Raw(tag)

编辑2:处理网址中的空格。

您需要使用Html.Content来获取正确的相对网址。

@{
    string link = item.Title;
    string path = Url.Content("~/Content/Files/") + link.Replace(" ", "%20") + ".pdf";
    string tag = "<a href=" + path + ">" + link + "</a>";
}

@Html.Raw(tag)

答案 2 :(得分:1)

首先是创建视图&lt;

<div class="form-group"> @Html.LabelFor(model => model.ImageData, new { @class = "control-label col-md-2" }) 
  <div class="col-md-10"> <input name="Image" type="file" /> 
    @Html.ValidationMessageFor(model => model.ImageData) 
  </div> 
</div>

然后控制器创建动作

public ActionResult Create(ArtWork artwork, HttpPostedFileBase image) { 
  if (ModelState.IsValid) { 
    if (image != null) { //attach the uploaded image to the object before saving to Database 
      artwork.ImageMimeType = image.ContentLength; 
      artwork.ImageData = new byte[image.ContentLength]; 
      image.InputStream.Read(artwork.ImageData, 0, image.ContentLength); //Save image to file 
      var filename = image.FileName; 
      var filePathOriginal = Server.MapPath("/Content/Uploads/Originals"); 
      var filePathThumbnail = Server.MapPath("/Content/Uploads/Thumbnails"); 
      string savedFileName = Path.Combine(filePathOriginal, filename); 
      image.SaveAs(savedFileName); //Read image back from file and create thumbnail from it 
      var imageFile = Path.Combine(Server.MapPath("~/Content/Uploads/Originals"), filename); 

      using (var srcImage = Image.FromFile(imageFile)) 
      using (var newImage = new Bitmap(100, 100)) 
      using (var graphics = Graphics.FromImage(newImage)) 
      using (var stream = new MemoryStream()) { 
        graphics.SmoothingMode = SmoothingMode.AntiAlias; 
        graphics.InterpolationMode = InterpolationMode.HighQualityBicubic; 
        graphics.PixelOffsetMode = PixelOffsetMode.HighQuality; 
        graphics.DrawImage(srcImage, new Rectangle(0, 0, 100, 100)); 
        newImage.Save(stream, ImageFormat.Png); 
        var thumbNew = File(stream.ToArray(), "image/png"); 
        artwork.ArtworkThumbnail = thumbNew.FileContents; 
      } 
    } 

    //Save model object to database 
    db.ArtWorks.Add(artwork); 
    db.SaveChanges(); 
    return RedirectToAction("Index"); 
  } 
  return View(artwork); 
}

然后获取Image或GetThumbnail方法

public FileContentResult GetThumbnailImage(int artworkId) { 
  ArtWork art = db.ArtWorks.FirstOrDefault(p => p.ArtWorkId == artworkId); 
  if (art != null) { 
    return File(art.ArtworkThumbnail, art.ImageMimeType.ToString()); 
  } else { 
    return null; 
  } 
}

这里是视图中的显示

<td> <img src="@Url.Action("GetThumbnailImage", "Artwork", new { Model.ArtWorkId })" alt="Artwork Image" /> </td>