这是我第一次在layui环境下面使用croppers插件.先粘贴下前端代码并附上我的目录结构吧。

  1.  
     
  2.  
    @{
  3.  
    ViewData["Title"] = "Croppers";
  4.  
    }
  5.  
     
  6.  
    <!DOCTYPE html>
  7.  
    <html>
  8.  
    <head>
  9.  
    <meta charset="utf-8" />
  10.  
    <title></title>
  11.  
    <link href="~/lib/layui/layui.css" rel="stylesheet" />
  12.  
     
  13.  
    </head>
  14.  
    <body>
  15.  
    <div class="layui-form-item">
  16.  
    <label class="layui-form-label">头像</label>
  17.  
    <div class="layui-input-inline">
  18.  
    <input type="text" name="head" lay-verify="required" id="inputimgurl" placeholder="图片地址" value="123.jpg" class="layui-input">
  19.  
    </div>
  20.  
    <div class="layui-input-inline">
  21.  
    <div class="layui-upload-list" style="margin:0">
  22.  
    <img src="./微信图片_20190404185124.png" id="srcimgurl" class="layui-upload-img">
  23.  
    </div>
  24.  
    </div>
  25.  
    <div class="layui-input-inline layui-btn-container" style="width: auto;">
  26.  
    <button class="layui-btn layui-btn-primary" id="editimg">修改图片</button>
  27.  
    </div>
  28.  
    <div class="layui-form-mid layui-word-aux">头像的尺寸限定150x150px,大小在50kb以内</div>
  29.  
    </div>
  30.  
    <script src="~/lib/layui/layui.js"></script>
  31.  
     
  32.  
     
  33.  
     
  34.  
    <link href="~/lib/layui/cropper/cropper.css" rel="stylesheet" />
  35.  
    <script src="~/lib/layui/cropper/croppers.js"></script>
  36.  
    <script>
  37.  
    layui.config({
  38.  
    base: '/lib/layui/cropper/' //layui自定义layui组件目录
  39.  
    }).use(['form', 'croppers'], function () {
  40.  
    var $ = layui.jquery
  41.  
    , form = layui.form
  42.  
    , croppers = layui.croppers
  43.  
    , layer = layui.layer;
  44.  
     
  45.  
    //创建一个头像上传组件
  46.  
    croppers.render({
  47.  
    elem: '#editimg'
  48.  
    , saveW: 150 //保存宽度
  49.  
    , saveH: 150
  50.  
    , mark: 1 / 1 //选取比例
  51.  
    , area: '900px' //弹窗宽度
  52.  
    , url: "/Home/UpLoadImg" //图片上传接口返回和（layui 的upload 模块）返回的JOSN一样
  53.  
    , done: function (url) { //上传完毕回调
  54.  
    debugger
  55.  
    $("#inputimgurl").val(url);
  56.  
    $("#srcimgurl").attr('src', url);
  57.  
    }
  58.  
    });
  59.  
     
  60.  
    });
  61.  
    </script>
  62.  
    </body>
  63.  
    </html>

下面的这张图是我的目录结构！

下面这张图是我的后台代码！

  1.  
    [HttpPost]
  2.  
    public async Task<IActionResult> UpLoadImg()
  3.  
    {
  4.  
    var date = Request;
  5.  
    var files = Request.Form.Files;
  6.  
    long size = files.Sum(f => f.Length);
  7.  
    string webRootPath = _webHostEnvironment.WebRootPath;
  8.  
     
  9.  
    string newFileName = "";
  10.  
    foreach (var formFile in files)
  11.  
    {
  12.  
    if (formFile.Length > 0)
  13.  
    {
  14.  
     
  15.  
    string fileExt = System.IO.Path.GetExtension(formFile.FileName); //文件扩展名，不含“.”
  16.  
    long fileSize = formFile.Length; //获得文件大小，以字节为单位
  17.  
    newFileName = System.Guid.NewGuid().ToString() + "." + fileExt; //随机生成新的文件名
  18.  
    var filePath = webRootPath + "/upload/" + newFileName;
  19.  
    using (var stream = new FileStream(filePath, FileMode.Create))
  20.  
    {
  21.  
     
  22.  
    await formFile.CopyToAsync(stream);
  23.  
    }
  24.  
     
  25.  
    }
  26.  
    }
  27.  
    return Json(new { code = 0,msg="上传成功", data =new { src= "/upload/" + newFileName } });
  28.  
     
  29.  
    }

需要注意的是这个json返回格式我一开始参考了很多网上的例子发现都是错误的，后来还是我认真阅读了这个js的后台代码找到了正确的返回格式

重点看绿色框框里面的匿名对象里面还有对象所以new里面还要一个new。

总结下遇到几个花费了我时间的其他方面的点。第一是新的.net core框架mvc做的都是异步任务,其次再访问根目录的方法跟以前不一样了,大家可以看代码多体会体会！

layui插件croppers的使用的更多相关文章

  1. django项目使用layui插件给网站设置一个日历挂件，很简单实用。

    进入https://www.layui.com/首页下载layui文件 下载解压后把文件放在static静态文件中, html页面引入css和js <link rel="stylesh ...

  2. layui+croppers完成图片剪切上传

    不多说直接上代码: 前台代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8" / ...

  3. layui 日期插件一闪而过

    关于一个layui插件日期的问题,在本地调试都是可以的,但发布到服务器上的时候,日期插件一闪而过,后来我以为是各个插件之间的冲突,我就每个插件的排除,但是还是无动于衷,然后我就去官网看了下是,需要加一 ...

  4. 权限管理系统之SpringBoot集成LayUI实现后台管理首页

    万事开头难,昨天一直在构思用户权限管理系统怎么实现,实现哪些需求,采用什么技术等,也在网上百度了好多,计划使用SpringBoot + Mybatis + thymeleaf  + LayUI + S ...

  5. 在layui中使用ajax不起作用

    又是一个坑,坑了我一个下午.在layui插件中使用jquery的ajax请求,一点反应都没有,不管是改成get还是post请求,后台毫无反应,前端谷歌调试也没有报半点错. js代码如下: layui. ...

  6. vue layui

    关于 vue中使用layui插件,个人一些小小的心得. 我是全局的引入,在static文件夹里存放layui的完整代码 在index页面中标签引入 <link rel="stylesh ...

  7. layui table指定某一行样式

    1.想指定layui table中某一行的样式,找了这个资源可行.转自: https://blog.csdn.net/weixin_44729896/article/details/100524824 ...

  8. layui经典模块化前端UI框架初识

    layui产生背景 layui相对于vue来说确实稍有逊色,但是官网提供的入门文档以及完善的框架结构,使的很多人开始用layui来开发前端页面,那么什么人会去使用layui呢? 针对后端开发人员,在对 ...

  9. layui的入门使用

    1.如果使用单独的layui插件的话需要先引入jquery的插件,官方建议1.8+的版本. 2.引入后就能根据规则正常使用了.

随机推荐

  1. Java基础-数据类型的拓展

    整数拓展:进制 二进制 0b开头 十进制 八进制 0开头 十六进制 0x开头 0~9 A~F 16 int i = 10; int i1 = 010;//八进制 0开头 int i2 = 0x10;/ ...

  2. 【T-SQL】基础——操作

    --删除表 如果已经存在USE master--检查是否已经存在一个表,如果有就删除IF(EXISTS(SELECT * FROM INFORMATION_SCHEMA.TABLES WHERE TA ...

  3. python地图投影转换

    一.投影包osr与proj4的使用 1.osr投影转换示例 from osgeo import osr,ogr#定义投影#wgs84source=osr.SpatialReference()sourc ...

  4. Coursera课程笔记----Write Professional Emails in English----Week 2

    Let's Start Writing (Week 2) Write Effective Subject Lines be BRIEF 50 characters or less = 5-7 word ...

  5. [csu1392]YY一下

    题意:给定x,求有多少个10^8以内的数满足这个数乘以x以后,最高位到了最低位.设最高位的数字和剩余长度,列等式推理即可. #pragma comment(linker, "/STACK:1 ...

  6. 关于前后端写入Cookie时domain的一个问题

    1.1. 前端 先假设有如下setCookie方法: function setCookie(name, value, day, path, domain) { day = day || 30; pat ...

  7. python --文件读取数据

    读取整个文件: 首先创建一个文件,例如我创建了一个t x t文件了. 然后我想读取这个文件了,我首先将上面的这个文件保存在我即将要创建的Python的文件目录下, 即读取文件成功. 解析: 函数ope ...

  8. 【雕爷学编程】MicroPython动手做（03）——零基础学MaixPy之开机测试

    1.几个知识点(1)MicroPython 是 Python 3 语言的精简高效实现 ,包括Python标准库的一小部分,并针对嵌入式微控制器(单片机)和受限制的环境进行了优化,它是Python延伸出 ...

  9. 【雕爷学编程】Arduino动手做（43）---单路继电器模块

    37款传感器与模块的提法,在网络上广泛流传,其实Arduino能够兼容的传感器模块肯定是不止37种的.鉴于本人手头积累了一些传感器和模块,依照实践(动手试试)出真知的理念,以学习和交流为目的,这里准备 ...

  10. 201771010117马兴德 实验二 Java基本程序设计（1）

    实验二 Java基本程序设计(1)  第一部分    理论知识的学习. 第三章Java基本程序设计结构 1  基本知识: (1)标识符:标识符由字母.下划线.美元符号和数字组成,且第一个符号不能为数字 ...