zoukankan      html  css  js  c++  java
  • layui+croppers完成图片剪切上传

    不多说直接上代码:

    前台代码:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <link href="../layui/layui/css/layui.css" rel="stylesheet" />
        <link href="../layui/cropper/cropper.css" rel="stylesheet" />
    </head>
    <body>
        <div class="layui-form-item">
            <label class="layui-form-label">头像</label>
            <div class="layui-input-inline">
                <input type="text" name="head" lay-verify="required" id="inputimgurl" placeholder="图片地址" value="123.jpg" class="layui-input">
            </div>
            <div class="layui-input-inline">
                <div class="layui-upload-list" style="margin:0">
                    <img src="./微信图片_20190404185124.png" id="srcimgurl" class="layui-upload-img">
                </div>
            </div>
            <div class="layui-input-inline layui-btn-container" style=" auto;">
                <button class="layui-btn layui-btn-primary" id="editimg">修改图片</button>
            </div>
            <div class="layui-form-mid layui-word-aux">头像的尺寸限定150x150px,大小在50kb以内</div>
        </div>
        <script src="../layui/layui/layui.js"></script>
        <link href="../layui/cropper/cropper.css" rel="stylesheet" />
        <script src="../layui/cropper/croppers.js"></script>
        <script>
            layui.config({
                base: '/layui/cropper/' //layui自定义layui组件目录
            }).use(['form', 'croppers'], function () {
                var $ = layui.jquery
                    , form = layui.form
                    , croppers = layui.croppers
                    , layer = layui.layer;
    
                //创建一个头像上传组件
                croppers.render({
                    elem: '#editimg'
                    , saveW: 150     //保存宽度
                    , saveH: 150
                    , mark: 1 / 1    //选取比例
                    , area: '900px'  //弹窗宽度
                    , url: "/home/UpLoadImg"  //图片上传接口返回和(layui 的upload 模块)返回的JOSN一样
                    , done: function (url) { //上传完毕回调
                        $("#inputimgurl").val(url);
                        $("#srcimgurl").attr('src', url);
                    }
                });
    
            });
        </script>
    </body>
    </html>

    后台代码:

            [HttpPost]
            public ActionResult UpLoadImg()
            {
    
                //HttpPostedFileBase file = Request.Files["upfile"];
                HttpPostedFileBase file = Request.Files["file"];
                var type = Request.Form["type"];
                var filename = string.Format("{0:yyyyMMddHHmmssfffffff}", DateTime.Now) + ".jpg";
                if (file != null)
                {
    
                    string path = HttpContext.Server.MapPath("/Images/Uploads");
                    string filePath = Path.Combine(path, Path.GetFileName(filename));
                    //根据需要创建文件夹
                    CreateFolderIfNeeded(path);
                    //将图片保存到IIS
                    file.SaveAs(filePath);
                }
    
                return Json(new { code=0,data= filename });
            }

    croppers.js代码:

    /*!
     * Cropper v3.0.0
     */
    
    layui.config({
        base: '/static/cropper/' //layui自定义layui组件目录
    }).define(['jquery','layer','cropper'],function (exports) {
        var $ = layui.jquery
            ,layer = layui.layer;
        var html = "<link rel="stylesheet" href="/static/cropper/cropper.css">
    " +
            "<div class="layui-fluid showImgEdit" style="display: none">
    " +
            "    <div class="layui-form-item">
    " +
            "        <div class="layui-input-inline layui-btn-container" style=" auto;">
    " +
            "            <label for="cropper_avatarImgUpload" class="layui-btn layui-btn-primary">
    " +
            "                <i class="layui-icon">&#xe67c;</i>选择图片
    " +
            "            </label>
    " +
            "            <input class="layui-upload-file" id="cropper_avatarImgUpload" type="file" value="选择图片" name="file">
    " +
            "        </div>
    " +
            "        <div class="layui-form-mid layui-word-aux">头像的尺寸限定150x150px,大小在50kb以内</div>
    " +
            "    </div>
    " +
            "    <div class="layui-row layui-col-space15">
    " +
            "        <div class="layui-col-xs9">
    " +
            "            <div class="readyimg" style="height:450px;background-color: rgb(247, 247, 247);">
    " +
            "                <img src="" >
    " +
            "            </div>
    " +
            "        </div>
    " +
            "        <div class="layui-col-xs3">
    " +
            "            <div class="img-preview" style="200px;height:200px;overflow:hidden">
    " +
            "            </div>
    " +
            "        </div>
    " +
            "    </div>
    " +
            "    <div class="layui-row layui-col-space15">
    " +
            "        <div class="layui-col-xs9">
    " +
            "            <div class="layui-row">
    " +
            "                <div class="layui-col-xs6">
    " +
            "                    <button type="button" class="layui-btn layui-icon layui-icon-left" cropper-event="rotate" data-option="-15" title="Rotate -90 degrees"> 向左旋转</button>
    " +
            "                    <button type="button" class="layui-btn layui-icon layui-icon-right" cropper-event="rotate" data-option="15" title="Rotate 90 degrees"> 向右旋转</button>
    " +
            "                </div>
    " +
            "                <div class="layui-col-xs5" style="text-align: right;">
    " +
            "                    <button type="button" class="layui-btn" title="移动"></button>
    " +
            "                    <button type="button" class="layui-btn" title="放大图片"></button>
    " +
            "                    <button type="button" class="layui-btn" title="缩小图片"></button>
    " +
            "                    <button type="button" class="layui-btn layui-icon layui-icon-refresh" cropper-event="reset" title="重置图片"></button>
    " +
            "                </div>
    " +
            "            </div>
    " +
            "        </div>
    " +
            "        <div class="layui-col-xs3">
    " +
            "            <button class="layui-btn layui-btn-fluid" cropper-event="confirmSave" type="button"> 保存修改</button>
    " +
            "        </div>
    " +
            "    </div>
    " +
            "
    " +
            "</div>";
        var obj = {
            render: function(e){
                $('body').append(html);
                var self = this,
                    elem = e.elem,
                    saveW = e.saveW,
                    saveH = e.saveH,
                    mark = e.mark,
                    area = e.area,
                    url = e.url,
                    done = e.done;
    
                var content = $('.showImgEdit')
                    ,image = $(".showImgEdit .readyimg img")
                    ,preview = '.showImgEdit .img-preview'
                    ,file = $(".showImgEdit input[name='file']")
                    , options = {aspectRatio: mark,preview: preview,viewMode:1};
    
                $(elem).on('click',function () {
                    layer.open({
                        type: 1
                        , content: content
                        , area: area
                        , success: function () {
                            image.cropper(options);
                        }
                        , cancel: function (index) {
                            layer.close(index);
                            image.cropper('destroy');
                        }
                    });
                });
                $(".layui-btn").on('click',function () {
                    var event = $(this).attr("cropper-event");
                    //监听确认保存图像
                    if(event === 'confirmSave'){
                        image.cropper("getCroppedCanvas",{
                             saveW,
                            height: saveH
                        }).toBlob(function(blob){
                            var formData=new FormData();
                            formData.append('file',blob,'head.jpg');
                            $.ajax({
                                method:"post",
                                url: url, //用于文件上传的服务器端请求地址
                                data: formData,
                                processData: false,
                                contentType: false,
                                success:function(result){
                                    if(result.code == 0){
                                        layer.msg(result.msg,{icon: 1});
                                        layer.closeAll('page');
                                        return done(result.data.src);
                                    }else if(result.code == -1){
                                        layer.alert(result.msg,{icon: 2});
                                    }
    
                                }
                            });
                        });
                        //监听旋转
                    }else if(event === 'rotate'){
                        var option = $(this).attr('data-option');
                        image.cropper('rotate', option);
                        //重设图片
                    }else if(event === 'reset'){
                        image.cropper('reset');
                    }
                    //文件选择
                    file.change(function () {
                        var r= new FileReader();
                        var f=this.files[0];
                        r.readAsDataURL(f);
                        r.onload=function (e) {
                            image.cropper('destroy').attr('src', this.result).cropper(options);
                        };
                    });
                });
            }
    
        };
        exports('croppers', obj);
    });
    View Code

    cropper插件可以直接网上下载。

    基本剪切上传图片功能完成,还需要修改样式和处理返回值的需要根据自己需要改动下代码。出处x-admin-》第三方插件-》截图

  • 相关阅读:
    iOS UILable 自定义高度 用masony适配
    iOS上架所需图片大小明细
    GCD倒计时
    iOS 小知识汇总
    七、Swift 枚举 Enumerations
    C语言深度剖析笔记
    六、闭包 Closures
    经济学常识
    Mac小技巧
    五、函数 Functions
  • 原文地址:https://www.cnblogs.com/zhuyapeng/p/11270657.html
Copyright © 2011-2022 走看看