这是我第一次在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. spring类型转换

    如果表单提交的时候,有的字段是字符串类型,但是后台接收到的时候是其他类型(比如日期类型),我们就可以使用类型转换来把字符串类型转换为需要的类型.当字符串类型和后台的日期类型匹配的时候,也可以不做转换, ...

  2. 【Hadoop离线基础总结】MapReduce倒排索引建立

    MapReduce倒排索引建立 求某些单词在文章中出现多少次 有三个文档的内容,求hello,tom,jerry三个单词在其中各出现多少次 hello tom hello jerry hello to ...

  3. [hdu4585]离线，并查集

    题意:把一些数加到集合里面,每个数有两个属性,分别是编号和值,加进去之前询问集合里面距离自己“最近”的数的编号.最近的意思是值的差的绝对值最小,如果有相等的,则取值小的.并且已知所有数的id和valu ...

  4. vue相关环境搭建一条龙

    前言 如题,基于很多朋友对于环境配置及搭建存在疑问或者不熟悉的情况,因此整理一篇完整的环境搭建说明,在此默认各位到手的电脑是需要从0开始配置环境.  nvm的安装 很多同学过去可能安装node都是直接 ...

  5. 常用header头

    // ok 正常访问header('HTTP/1.1 404 Not Found'); //通知浏览器 页面不存在 header('HTTP/1.1 200 OK'); //设置地址被永久的重定向 3 ...

  6. sudo apt-get update 与 sudo apt-get upgrate 的区别

      1.sudo gedit /etc/apt/sources.list 源列表里面放置的一行行网址,在这个文件里加入或者注释(加#)掉一些源后,保存.这时候,我们的源列表里指向的软件就会增加或减少一 ...

  7. 【雕爷学编程】MicroPython动手做（04）——零基础学MaixPy之尝试运行

    1.hello micropython #MicroPython动手做(04)——零基础学MaixPy之基本示例 #程序之一:hello micropython #MicroPython动手做(04) ...

  8. 14.3 Go iris

    14.3 Go iris 下载 go get -u -v github.com/kataras/iris 代码示例 package main import "github.com/katar ...

  9. 07 返回多个页面web框架

    07 返回多个页面web框架 服务器server端python程序(不同页面版本): import socket server=socket.socket() server.bind(("1 ...

  10. 《机器学习_07_02_svm_软间隔支持向量机》

    一.简介 上一节介绍了硬间隔支持向量机,它可以在严格线性可分的数据集上工作的很好,但对于非严格线性可分的情况往往就表现很差了,比如: import numpy as np import matplot ...