Upload and display of MVC 4 images, and upload of mvc Images

Upload and display of MVC 4 images, and upload of mvc Images

First, let's take a look at how to upload:

1. view

 

Upload page:

  1: @using (Html.BeginForm("Create", "Achievement", FormMethod.Post, new { enctype = "multipart/form-data" }))
  2: {
  3:      <div class="editor-label">
  4:             @Html.LabelFor(model => model.Pictures)
  5:         </div>
  6:         <div class="editor-field">
  7:             <div><input type="file" name="Image" /></div>
  8:         </div>
  9: ｝

Here we needNote the parameters of the BeginForm method.

2. control

  1:  public ActionResult Create(Achivement achieve, HttpPostedFileBase image)
  2:         {
  3:             try
  4:             {
  5:                 
  6:                 if (image != null && image.ContentLength > 0)
  7:                 {
  8:                     string fileName = DateTime.Now.ToString("yyyyMMdd") + "-" + Path.GetFileName(image.FileName);
  9:                     string filePath = Path.Combine(Server.MapPath("~/Images"), fileName);
 10:                     image.SaveAs(filePath);
 11:                     achieve.Pictures = "~/Images/" + fileName ; 
 12:                 }
 13:                 m_achivementService.Create(achieve);
 14:                 return RedirectToAction("Index");
 15:             }
 16:             catch
 17:             {
 18:                 return View();
 19:             }
 20:         }

Now the image has been uploaded to the Images directory,Note that the path of the image saved in the Pictures field must contain "~".

Now let's take a look at how to display:

1. view

  1: @using (Html.BeginForm("Edit", "Achievement", FormMethod.Post, new { enctype = "multipart/form-data" }))
  2: {
  3:    <div class="editor-label">
  4:             @Html.LabelFor(model => model.Pictures)
  5:         </div>
  6:         <div class="editor-field">
  7:             @*@Html.EditorFor(model => model.Pictures)
  8:             @Html.ValidationMessageFor(model => model.Pictures)*@
  9:             <div><input type="file" name="Image" /></div>
 10:             <div>
 11:                 @if (string.IsNullOrEmpty(Model.Pictures))
 12:                 {
 13:                     @:None
 14:                 }
 15:                 else
 16:                 {
 17:                       
 18:                 }
 19:             </div>
 20:         </div>
 21: ｝

Note that Model. Pictures cannot be written directly in src.@ Url. ContentOtherwise, c:/images/123.pngis displayed. The image cannot be displayed normally.

control：

The same operation as create, Which is omitted here.

How does aspnet mvc4 upload photos in a table?

Hide a form at the bottom of the page, which is not displayed by default. Javascript is used to control display and upload. ajax can return a path after asynchronous upload is submitted.
 
How to upload and display images in the mvc View

It would be too easy to upload the file. It would be difficult to display the file if it was to be displayed, because the file cannot be submitted only once to the server and must be submitted asynchronously. The following example is written by myself. The upload image is submitted asynchronously and previewed. All code is in.

First, create an html file and copy the following html text. Instructions for use:
Reference two js files of jquery. Search for them on the internet and find them everywhere.
<Script src = "jquery-1.4.2.min.js" type = "text/javascript"> </script>
<Script src = "jquery. form. js" type = "text/javascript"> </script>

2. Add two text boxes. The first ID must be "bigImage1", and the second ID must be "smallbigImage1 ".
<Input type = "text" name = "url1" id = "bigImage1" style = "width: 150px;" onclick = "selectImage (this)"/>
<Input type = "hidden" name = "smallUrl1" id = "smallbigImage1" value = ""/>
When you click the first text box, an upload window pops up. Select an image and click "Upload". After the upload is successful, you can preview the image. This process will generate a thumbnail of the original image on the server, and return the original image URL and thumbnail URL together to the front-end page in JSON format to temporarily display the thumbnail. When you click "OK", it adds the two URLs to the text boxes of the two corresponding IDs. The second box is hidden, giving the user the feeling that only one URL is returned.
3. write the script [document. getElementById ("bigImage1"). value] To get the values of the two text boxes and perform the operations you want.
4. The DIV whose id is "uploadDiv" is an integral and inseparable entity. It mainly provides a file-type form for asynchronous upload. Modify the action URL to the background path you uploaded.

The following is the HTML code.
<! DOCTYPE html>