layui编写一个图片裁剪上传功能代码-html代码-BFW代码库

layui编写一个图片裁剪上传功能代码

代码语言：html

所属分类：上传

代码描述：layui编写一个图片裁剪上传功能代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/layui.2.6.5.js"></script>
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/js/layui/css/layui.css">



    <style>
        *{margin: 0;padding: 0;box-sizing: border-box;user-select: none;}
        .container{width: 100%;height: 100%;}
        .tz-main{position:absolute;width: 600px;height: 400px;left:50%;top:50%;margin-left:-300px;margin-top:-200px;}
        .file-name{position: absolute;width: 200px;height: 200px;top: 50%;left: 75%;margin: -93pt 0 0 -75pt;border: 1px solid #fff;z-index: 1;cursor: no-drop;}
        .tz-received{position:absolute;overflow:hidden;width:600px;height:350px;border:1px solid #eee;background:#eee;cursor:move; }
        .cut-box{top:50%;margin:-75pt 0 0 -75pt;height:200px;border: 1px solid #fff;box-shadow:0 0 0 750pt rgba(0,0,0,.3)}
        .cut-box{position:absolute;left:30%;width:200px}
        .up-box{position: relative;height: 50px;padding:4px;}
        .box-btn{width: 236px;position: absolute;left: 50%;margin-left: -118px;}
        .up-box a { display: block; float: left;margin-left: 15px;padding: 11px;}
        .up-box a:hover{color: #fff;}
        .total-btn{border-radius:4px;background:#169af3;color:#fff;cursor:pointer}
        .select-btn{margin-left: -4px !important;}
        .tz-main .tz-sm{position:absolute;bottom:0px;width:inherit;}
        .tz-sm>p{overflow:hidden;padding:15px 0 0;width:100%;text-overflow:ellipsis;white-space:nowrap}
        .tz-sm .sp,.tz-sm>p{font-weight:100;font-size:14px}
    </style>
</head>

<body>

    <div class="container">
        <div class="tz-main">
            <div style="position: relative;width: 600px;height: 400px;">
                <div class="file-name"></div>
                <div class="tz-received" id="TzReceived">
                    <div class="cut-box"></div>
                </div>
                <div class="tz-sm" id="tzsm">
                    <div class="up-box">
                        <div class="box-btn">
                            <a href="javascript:;" id="selectBtn" class="total-btn select-btn">选择图片</a>
                            <a href="javascript:;" id="cutBtn" class="total-btn cut-btn">裁剪</a>
                            <a href="javascript:;" id="uploadBtn" class="total-btn upload-btn">立即上传</a>
       .........完整代码请登录后点击上方下载按钮下载查看