.net mvc+layui做图片上传图文详解

百变鹏仔 2个月前 (11-16) #layui

文章标签详解

图片上传和展示是互联网应用中比较常见的一个功能，本文图片上传功能前端用到的图片上传控件是layui ,数据库是用的 sql server ，code first开发模式。

一、创建表

因为图片上传之后需要保存路径等信息，所以，得先建一个Image表，表的设计为如下：

下面看实体类和上下文的代码：

1.新建实体类Image.cs

如图：

代码如下：

Image.cs

using System;using System.Collections.Generic;using System.ComponentModel.DataAnnotations;using System.ComponentModel.DataAnnotations.Schema;using System.Linq;using System.Text;using System.Threading.Tasks;namespace Modules{    [Table("Info_Image")]    public class Image    {        public Image() {            IsDelete = false;        }        /// <summary>        /// 主键id        /// </summary>        public Guid Id { get; set; }        /// <summary>        /// 图片名        /// </summary>        [Required]        [MaxLength(50)]        public string Name { get; set; }        /// <summary>        /// 图片保存链接        /// </summary>        [Required]        [MaxLength(50)]        public string Url { get; set; }        /// <summary>        /// 上传时间        /// </summary>        public DateTime UploadTime { get; set; }        /// <summary>        /// 备注        /// </summary>        [MaxLength(200)]        public string Remark { get; set; }        /// <summary>        /// 是否删除        /// </summary>        public bool IsDelete { get; set; }    }}

2.将实体类添加到上下文：

如图：

代码：

MyDbContext.cs

  public DbSet<image> Images { get; set; }</image>

如果你和我一样是code first开发模式的话，那让程序跑一遍，这个数据表就应该在你的数据库里生成了，哈哈，这只是一个建表的过程，只要表能建好，什么模式都好，哈哈。

二、前端代码

1.新建控制器ImageUploadController.cs,然后创建一个视图Index.cshtml：

这里会用到layui的图片上传，关于这部分的代码使用，可以自行去layui官网查看：https://www.layui.com/demo/upload.html；

以下是页面图片，以及代码：

这是还没编写后台上传图片代码时的页面图片：

以下是前端代码：

@{    Layout = "../Shared/_TopLayout.cshtml";}nbsp;html&gt;    <meta>    <title>Index</title>    <div>        <div>            <label>图片标题</label>            <div>                <input>            </div>        </div>        <div>            <label>备注</label>            <div>                <textarea></textarea>            </div>        </div>        <div>            <div>                <label>上传图片</label>                <button>上传图片</button>                <div>                    <label>图片展示</label>                    @@##@@                    <p></p>                </div>            </div>        </div>             </div><script>    layui.use(&#39;upload&#39;, function () {        var $ = layui.jquery;        var upload = layui.upload;        //普通图片上传        var uploadInst = upload.render({            elem: &#39;#test1&#39;,            url: &#39;@Url.Action("Upload","ImageUpload")&#39;, //上传地址，后台的某个控制器            before: function (obj) {                obj.preview(function (index, file, result) {                    $(&#39;#demo1&#39;).attr(&#39;src&#39;, result);                });            }, //长传之前执行的代码，将需要上传的图片显示在页面上            done: function (res) {                if (res.Result) {                }            }, //上传成功后的回传数据，后台代码未编写，此处尚为写任何内容，将在后面的内容中补上            error: function () {                //演示失败状态，并实现重传                var demoText = $(&#39;#demoText&#39;);                demoText.html(&#39;<span style="color: #FF5722;">上传失败 <a class="layui-btn layui-btn-xs demo-reload">重试&#39;);                demoText.find(&#39;.demo-reload&#39;).on(&#39;click&#39;, function () {                    uploadInst.upload();                });            }        });    });</script>

三、后台代码及前端代码完善

接下来在上面代码所示的后台链接（）中编写图片上传代码：

下面先贴出代码，然后再讲解上传思路：

ImageUploadController.cs

/// <summary> /// 上传图片 /// </summary> /// <returns></returns> public ActionResult Upload() {     try     {         HttpFileCollectionBase files = Request.Files;         HttpPostedFileBase file = files[0];         //获取文件名后缀         string extName = Path.GetExtension(file.FileName).ToLower();         //获取保存目录的物理路径         if (System.IO.Directory.Exists(Server.MapPath("/Images/")) == false)//如果不存在就创建images文件夹         {             System.IO.Directory.CreateDirectory(Server.MapPath("/Images/"));         }         string path = Server.MapPath("/Images/"); //path为某个文件夹的绝对路径，不要直接保存到数据库     //    string path = "F:\TgeoSmart\Image\";         //生成新文件的名称，guid保证某一时刻内图片名唯一（文件不会被覆盖）         string fileNewName = Guid.NewGuid().ToString();         string ImageUrl = path + fileNewName + extName;         //SaveAs将文件保存到指定文件夹中         file.SaveAs(ImageUrl);         //此路径为相对路径，只有把相对路径保存到数据库中图片才能正确显示（不加~为相对路径）         string url = "\Images\" + fileNewName + extName;         return Json(new         {             Result = true,             Data = url         });     }     catch (Exception exception)     {         return Json(new         {             Result = false,             exception.Message         });     } }

上面一段代码里有详细的注释信息，这里需要注意的是，我们保存图片的路径的问题。

Server.MapPath（）函数获取的是某个文件夹的绝对路径，关于这个函数的一些用法我百度一份截图贴在这里：

Server.MapPath（）获取的是图片的绝对路径，而实际调用图片时，考虑到网站安全性问题，浏览器并不允许我们的页面使用绝对路径去获取图片资源，因此，在数据库中保存的路径只能是相对路径，也就是代码中这一句的作用：

上面代码中，我并没有直接保存imageUrl到数据库中，另外生成一个相对路径保存图片，原因就是这个。

下面给出完整的前端代码，包括图片上传的改进和所有信息的保存：

@{    Layout = "../Shared/_TopLayout.cshtml";}nbsp;html&gt;    <meta>    <title>Index</title>    <div><!--新增代码，添加信息保存按钮-->        <div>            <div>                <input>            </div>        </div>        <div>            <label>图片标题</label>            <div>                <input>            </div>        </div>        <div>            <label>备注</label>            <div>                <textarea></textarea>            </div>        </div>        <div>            <div>                <label>上传图片</label>                <button>上传图片</button>                <div>                    <label>图片上传前展示</label>                    @@##@@                    <p></p>                                  </div></div></div></div>

文章推荐

.net mvc+layui做图片上传图文详解

layui的分页怎么用

layui怎么设置checkbox勾选

layui怎么对弹出层显示数据

layui表格怎么清空

layui有什么主要功能