这是我第一次在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. Python学习之字符串中的下标和切片以及逆序

    python中的下标从0开始 从后往前取 注意:后面的2代表步长,先看2:-1取出来的数值 [起始位置:终止位置:步长] 逆序 但是发现如果[-1:0:-1]发现是取不到第一个元素的,那么怎么办? 此 ...

  2. 001_python变量,if,while

    Python介绍 python的出生与应用 python的创始人为吉多·范罗苏姆(Guido van Rossum).1989年的圣诞节期间,吉多·范罗苏姆(中文名字:龟叔)为了在阿姆斯特丹打发时间, ...

  3. Synchronized加锁、锁升级和java对象内存结构

    首先了解一下JMM中定义的内存操作: 一个线程操作数据时候都是从主内存(堆内存)读取到自己工作内存(线程私有的数据区域)中再进行操作.对于硬件内存来说,并没有工作内存和主内存的区分,这都是java内存 ...

  4. C：简单实现BaseCode64编码

    What is Base64? 前言 目前来看遇到过Base 16.Base 32.Base 64的编解码,这种编码格式是二进制和文本编码转化,是对称并且可逆的转化.Base 64总共有64个ASCI ...

  5. mongodb windows 集群搭建

    准备三台机器,系统:windows 8 192.168.1.1 192.168.1.2 192.168.1.3 每台机器上安装mongodb 服务,步骤: 下载以下文件并依次执行安装 clearcom ...

  6. [hdu4627 The Unsolvable Problem]数论

    题意:给一个数n,找一个正整数x<n,使得x和n-x的最小公倍数最大. 思路:显然x和n-x越接近越好,gcd必须为1(贪心).从大到小考虑x,如果n为奇数,则答案就是x=n/2,如果n为偶数, ...

  7. 帝国cms 批量替换 字段内容包含的 指定的 关键字 SQL命令

    帝国cms 批量替换 字段内容包含的 指定的 关键字update phome_ecms_news_data_1 set newstext=replace(newstext,'原来','现在');

  8. QQ恢复解散后的群聊或删除后的好友的方法

    今天有一个群被一个管理员乱踢人,之后将群解散. 事后几分钟我在想有没有什么方法可以重新恢复的方法,之后进入了QQ的官网进行查找. 本来以为没希望了,但是奇迹发生了. 原来真的可以恢复! 恢复的详情: ...

  9. Xshell 与 Xftp 的安装与使用

    我们在日常工作中,不管是系统管理员.程序员.还是技术工程师,如果想登陆到 Linux 服务器,不可能总是跑到机房去工作,通常我们需要一个工具帮我们去做远程连接,这样我们只需要用笔记本电脑就可以连接到服 ...

  10. SpringMvc上传图片及表单提交（单文件+实体类参数提交）

    前两天做项目用到了Springmvc的文件上传来上传图片,由于和这个普通的Java文件上传处理流程不太一样,所以做的时候碰了壁,一顿百度,博客,要不就是一部分代码,要不就是看不懂,用不会的代码,下面来 ...