.net mvc+layui做图片上传图文详解-Layui教程-PHP中文网

首页

web前端

Layui教程

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

尚

Nov 28, 2019 pm 01:42 PM

layui

.net mvc+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; }

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

二、前端代码

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

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

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

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

以下是前端代码：

@{
    Layout = "../Shared/_TopLayout.cshtml";
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    <div id="picUpload">
        <div class="layui-form-item">
            <label class="layui-form-label required">图片标题</label>
            <div class="layui-input-block" style="width: 554px; position: relative;">
                <input type="text" name="ImageTitle" lay-verify="required" placeholder="图片标题" autocomplete="off" class="layui-input" id="ITitle">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">备注</label>
            <div class="layui-input-block" style="width: 554px; position: relative;">
                <textarea placeholder="请输入内容" class="layui-textarea" name="Remark"></textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-upload">
                <label class="layui-form-label">上传图片</label>
                <button type="button" class="layui-btn" id="test1">上传图片</button>
                <div class="layui-upload-list">
                    <label class="layui-form-label">图片展示</label>
                    <img class="layui-upload-img" id="demo1" style="width:200px;height:auto;">
                    <p id="demoText"></p>
                </div>
            </div>
        </div>          
   </div>
</body>
</html>
<script type="text/javascript">
    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;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>&#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";
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    <div id="picUpload">
<!--新增代码，添加信息保存按钮-->
        <div class="layui-form-item sel-fixed-right">
            <div class="layui-input-block">
                <input type="button" class="layui-btn layui-btn-small layui-btn-normal" value="保存" onclick="saveInfo()" />
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label required">图片标题</label>
            <div class="layui-input-block" style="width: 554px; position: relative;">
                <input type="text" name="ImageTitle" lay-verify="required" placeholder="图片标题" autocomplete="off" class="layui-input" id="iTitle">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">备注</label>
            <div class="layui-input-block" style="width: 554px; position: relative;">
                <textarea placeholder="请输入内容" class="layui-textarea" name="Remark" id="iRemark"></textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-upload">
                <label class="layui-form-label">上传图片</label>
                <button type="button" class="layui-btn" id="test1">上传图片</button>
                <div class="layui-upload-list">
                    <label class="layui-form-label">图片上传前展示</label>
                    <img class="layui-upload-img" id="demo1" style="width:200px;height:auto;">
                    <p id="demoText"></p>                  
                </div>
<!--新增代码，上传后图片显示 -- >
                <div class="layui-upload-list">
                    <label class="layui-form-label">图片上传后展示</label>
                    <img class="layui-upload-img" id="demo2" style="width:200px;height:auto;">
                </div>
            </div>
       </div>
    </div>
</body>
</html>
<script type="text/javascript">
    var imageUrl;//新增代码，保存上传图片后回传的图片路径

    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) {
　　　　　　　　　　//新增代码，将回传的图片保存路径进行保存并将图片绑定到上传后图片展示处
                    imageUrl = res.Data;
                    $("#demo2").attr("src", imageUrl);
                }
            },
            error: function () {
                //演示失败状态，并实现重传
                var demoText = $(&#39;#demoText&#39;);
                demoText.html(&#39;<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>&#39;);
                demoText.find(&#39;.demo-reload&#39;).on(&#39;click&#39;, function () {
                    uploadInst.upload();
                });
            }
        });
    });

//新增代码，将完整的信息传到后台保存
    var saveInfo = function () {
        $.ajax({
            type: &#39;post&#39;,
            url: &#39;@Url.Action("Save", "ImageUpload")&#39;,
            dataType: &#39;json&#39;,
            data: {
                title: $("#iTitle").val(),
                remark: $("#iRemark").val(),
                url:imageUrl
            },
            success: function (res) {
                if (res.Result) {
                    alert("保存成功");
                }
            }
        });
    }
</script>

然后，补齐后端信息保存的代码：

public ActionResult Save(string title,string remark,string url)
 {
     try
     {
         var imageInfo = new ImageInfo() {
             Id = Guid.NewGuid(),
             Name = title,
             Url = url,
             Remark = remark,
             UploadTime = DateTime.Now.ToLocalTime()
         };
         context.ImageInfos.Add(imageInfo);
         context.SaveChanges();
         return Json(new{
             Result = true
         });

     } catch (Exception exception)
     {
         return Json(new {
             Result = true,
             exception.Message
         });
     }
 }

下面展示一下页面：

然后看一下数据库里的信息：

再看一下我们对应的图片保存的位置：

更多layui知识请关注layui使用教程栏目。

以上是.net mvc+layui做图片上传图文详解的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文转载于：博客园。如有侵权，请联系admin@php.cn删除

如何使用Layui的流块模块进行无限滚动？Mar 18, 2025 pm 01:01 PM

文章讨论了使用Layui的流量模块进行无限滚动，涵盖设置，最佳实践，性能优化和自定义，以增强用户体验。

如何使用Layui的元素模块来创建选项卡，手风琴和进度条？Mar 18, 2025 pm 01:00 PM

本文详细介绍了如何使用Layui的元素模块来创建和自定义UI元素，例如选项卡，手风琴和进度条，突出显示HTML结构，初始化和常见的陷阱，以避免。

如何自定义Layui旋转木制模块的外观和行为？Mar 18, 2025 pm 12:59 PM

本文讨论了自定义Layui的Carousel模块，重点介绍了外观和行为的CSS和JavaScript修改，包括过渡效果，自动播放设置以及添加自定义导航控件。

如何使用Layui的旋转木载模块来创建图像滑块？Mar 18, 2025 pm 12:58 PM

该文章指导使用Layui的Carousel模块用于图像滑块，详细介绍设置的步骤，自定义选项，实现自动播放和导航以及性能优化策略。

如何将Layui的上传模块配置为限制文件类型和尺寸？Mar 18, 2025 pm 12:57 PM

本文讨论了使用Accept，Exts和Size属性来限制Layui的上传模块，以限制文件类型和尺寸，并自定义错误消息以违反。

如何使用Layui的图层模块来创建模态窗口和对话框？Mar 18, 2025 pm 12:46 PM

本文介绍了如何使用Layui的图层模块创建模态窗口和对话框，详细设置，类型，自定义和常见的陷阱要避免。

See all articles

热AI工具

Undresser.AI Undress

人工智能驱动的应用程序，用于创建逼真的裸体照片

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

免费脱衣服图片

Clothoff.io

AI脱衣机

AI Hentai Generator

免费生成ai无尽的。

显示更多

热工具

SublimeText3汉化版

中文版，非常好用

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

SecLists

SecLists是最终安全测试人员的伙伴。它是一个包含各种类型列表的集合，这些列表在安全评估过程中经常使用，都在一个地方。SecLists通过方便地提供安全测试人员可能需要的所有列表，帮助提高安全测试的效率和生产力。列表类型包括用户名、密码、URL、模糊测试有效载荷、敏感数据模式、Web shell等等。测试人员只需将此存储库拉到新的测试机上，他就可以访问到所需的每种类型的列表。