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

时间：2024-07-12

支持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));
}

上一篇：php数组通过array_push函数进行排序及选择排序 下一篇：没有了

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

相关文章