layui实现上传图片并自定义截取(含php后端代码)

2024-07-12实例代码
103

支持Promise API
支持移动触摸事件
基于canvas技术,支持canvas的浏览器都可以使用该插件
通过Base64编码导出剪裁后的图片。 可以通过json数据来获取图片的位置和大小
可以通过json数据来设置图片的位置和大小
可以通过URL来获取图片。
HTML代码部分:
<script src="layui/layui/layui.js"></script>
    <link rel="stylesheet" type="text/css" href="layui/layui/css/layui.css">
    <link rel="stylesheet" type="text/css" href="cropper.css">
    <script src="cropper.js"></script>
    <script src="croppers.js"></script>
<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="图片地址" class="layui-input">
    </div>
    <div class="layui-input-inline">
        <div class="layui-upload-list" style="margin:0" id="srcimgurl"></div>
    </div>
    <div class="layui-input-inline layui-btn-container">
        <button class="layui-btn layui-btn-primary" id="editimg">选择图片</button>
    </div>
    <div class="layui-form-mid layui-word-aux">头像的尺寸限定150x150px,大小在50kb以内</div>
</div>
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: ['90%', '80%']//弹窗宽度
            , url: 'upload.php'
            , done: function (res) {
                console.log(res.imgUrl)
                $("#inputimgurl").val(res.imgUrl);
                $("#srcimgurl").html('<img src="' + res.imgUrl + '" width="30" class="layui-upload-img">');
            }
        });
    });
PHP后端上传
<?php
$upload_dir = 'upload';
$newDate = date("Y-m");
$imgUrl = $upload_dir . '/' . $newDate;

if (!is_dir($upload_dir)) {
    mkdir($upload_dir);
}
if (!is_dir($imgUrl)) {
    mkdir($imgUrl);
}

//获取传递参数;
$file = $_FILES['file'];
$ext = explode('.', $_FILES['file']['name']);
$ext = end($ext);
$fileName = md5(time()) . "." . $ext;

//执行上传;
if (isset($_FILES['file']) && $_FILES['file']['error'] == "0") {
    //上传图片;
    move_uploaded_file($file['tmp_name'], $imgUrl . "/" . $fileName);
    $safe_img = $imgUrl . "/" . $fileName;

    //返回JSON;
    $res['code'] = "0";
    $res['imgUrl'] = $safe_img;
    $res['err'] = '上传成功!';
    die(json_encode($res));
}
 
The End

相关推荐

layui后台布局实例代码
layui后台布局的实例代码,以下是详细代码: !DOCTYPE htmlhtmlhead meta charset="utf-8" meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" titlelayout 后台大布局 - Layui/title link rel="stylesheet" ...
2025-10-15 实例代码
68

可自动切换的tab实例代码
可自动切换的tab实例代码,html代码如下: !-- tab标签代码begin --div class="tab1" id="tab1" div class="menu" ul li id="one1" onclick="setTab('one',1)"新闻/li li id="one2" onclick="setTab('one',2)"活动/li li id="one3" onclick="setTab('one',3)"...
2025-09-16 实例代码
114

php数据处理:数组根据某字段进行分组
php数据处理:数组根据某字段进行分组,实例代码如下: /** * @description:根据数据 * @param {dataArr:需要分组的数据;keyStr:分组依据} * @return: */ protected function dataGroup(array $dataArr,string $keyStr) :array { $newArr=[]; foreach ($data...
2025-06-12 实例代码
188

LayUI登录页面页设计实例
实例代码如下: !DOCTYPE htmlhtml lang="en" head meta charset="utf-8" link rel="stylesheet" href="layui/css/layui.css" style type="text/css" .container{ width: 420px; height: 320px; min-height: 320px; max-height: 320px; position: absolute; t...
2025-04-13 实例代码
234

MUI Picker Input设置默认时间回显实例代码
MUI Picker Input设置默认时间回显实例代码 mui('body').on('tap', '#begTime', function () { //日期选择 var dtPicker = new mui.DtPicker({ type: 'date' }); /*参数:'datetime'-完整日期视图(年月日时分) 'date'--年视图(年月日) 'time' --时间视图(时分...
2025-01-09 实例代码
139

layui实现带清除按钮的输入框
layui实现带清除按钮的输入框,首先html文件如下: !DOCTYPE htmlhtmlhead meta charset="utf-8" meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" title测试 - layui/title link rel="stylesheet" href="layui/css/lay...
2024-12-31 实例代码
200