如何在编辑页面ASP.NET MVC中为HttpPostedFileBase创建输入类型文件？

Question

I met an issue during developing a MVC application.

I started with simple model which is used for a view, like:

public class MyModel 
{
    public HttpPostedFileBase[] Files { get; set; }

    public string Name { get; set; }
}

I have a view (Create.aspx)

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<MyModel>" %>
...
    <form method="post" action="/My/Create" enctype = "multipart/form-data">
        <input type="file" name="Files" />
        ...
        <%:Html.TextBoxFor(item=>item.Name) %>
        <input type="submit" value="Create" />
    </form>

The controller:

public class ActionController: Controller {
    public ActionResult Create() {  
        var myModel = new MyModel(); 
        return View(model); 
    }

    [HttpPost]
    public ActionResult Create(MyModel model) {
        if(ModelState.isValid) { /* save */ }
    }

    public ActionResult Edit(int id) {  
        var myModel = _manager.Get(id);
        myModel.Files = /* what to do here ? */ 

        return View(model); 
    }

    [HttpPost]
    public ActionResult Edit(MyModel model) {
        if(ModelState.isValid) { /* edit */ }
    }
} 

My question : How to create HttpPostedFileBase object to be send to view and display them (see below Edit page) ?

The files are stored in database as nvarchar with relative path to them (as label).

I want to preserve already saved file and just change the name field.

From database I receive an object which stores file path, the type of file and a file stream.

And for Edit aspx page:

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<MyModel>" %>
...
    <form method="post" action="/My/Edit" enctype = "multipart/form-data">
        <input type="file" name="Files" />
        /* display here the files */
        ...
        <%:Html.TextBoxFor(item=>item.Name) %>
        <input type="submit" value="Create" />
    </form>

Answer 1

You simply cannot use HttpPostedFileBase to display your files. As its description says:

Serves as the base class for classes that provide access to individual files that have been uploaded by a client.

It is used to access files that are being uploaded. If you want to display files that have been uploaded, then you have to use some other approach like using File methods .

Answer 2

You can show file on view using code like an example below:

    public FileContentResult ViewImage(/*parameters*/)
    {
        byte[] img = //TODO: take your image as byte array
        return new FileContentResult(img, "image/jpeg");
    }

and in your view :

<img src="@Url.Action("ViewImage", "ControllerName", new { @*parameters*@ })">

But if you want just preview files before upload you have to use something like this:

HTML:

<p>Please specify an image file: <input type="file" name="datafile" id="datafile" size="40"></p>
<div id="preview"><img height="240" /></div>

JS:

$(function() {
   $('#datafile').change(function(e)
       {
           e.preventDefault();
           var f = e.target.files[0];
           if(f && window.FileReader)
           {
               var reader = new FileReader();
               reader.onload = function(evt) { $('#preview>img').attr('src', evt.target.result); };
               reader.readAsDataURL(f);
           }
       }
   );
});

FIDDLE