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>
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 .
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);
}
}
);
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.