hi,你好!欢迎访问本站!登录
本站由简数采集腾讯云宝塔系统阿里云强势驱动
当前位置:首页 - 文章 - 后端开发 - 正文 看Cosplay古风插画小姐姐,合集图集打包下载:炫龙网 · 炫龙图库

.net mvc+layui做图片上传图文详解_WEB前端开发

2019-11-30后端开发ki4网19°c
A+ A-

图片上传和展现是互联网运用中比较罕见的一个功用,本文图片上传功用前端用到的图片上传控件是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('upload', function () {
        var $ = layui.jquery;
        var upload = layui.upload;
        //一般图片上传
        var uploadInst = upload.render({
            elem: '#test1',
            url: '@Url.Action("Upload","ImageUpload")', //上传地点,背景的某个控制器
            before: function (obj) {
                obj.preview(function (index, file, result) {
                    $('#demo1').attr('src', result);
                });
            }, //长传之前实行的代码,将须要上传的图片显现在页面上
            done: function (res) {
                if (res.Result) {

                }
            }, //上传胜利后的回传数据,背景代码未编写,此处尚为写任何内容,将在背面的内容中补上
            error: function () {
                //演示失利状况,并完成重传
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失利</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', 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('upload', function () {
        var $ = layui.jquery;
        var upload = layui.upload;
        //一般图片上传
        var uploadInst = upload.render({
            elem: '#test1',
            url: '@Url.Action("Upload","ImageUpload")',
            before: function (obj) {
                obj.preview(function (index, file, result) {
                    $('#demo1').attr('src', result);
                });
            },
            done: function (res) {
                if (res.Result) {
          //新增代码,将回传的图片保留途径举行保留并将图片绑定到上传后图片展现处
                    imageUrl = res.Data;
                    $("#demo2").attr("src", imageUrl);
                }
            },
            error: function () {
                //演示失利状况,并完成重传
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失利</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function () {
                    uploadInst.upload();
                });
            }
        });
    });

//新增代码,将完全的信息传到背景保留
    var saveInfo = function () {
        $.ajax({
            type: 'post',
            url: '@Url.Action("Save", "ImageUpload")',
            dataType: 'json',
            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做图片上传图文详解的细致内容,更多请关注ki4网别的相干文章!

  选择打赏方式
微信赞助

打赏

QQ钱包

打赏

支付宝赞助

打赏

  选择分享方式
  移步手机端
.net mvc+layui做图片上传图文详解_WEB前端开发

1、打开你手机的二维码扫描APP
2、扫描左则的二维码
3、点击扫描获得的网址
4、可以在手机端阅读此文章
标签:

发表评论

选填

必填

必填

选填

请拖动滑块解锁
>>