界面一:

PC端-上传头像并裁剪

<link href="../theme/js/layui.layim/src/css/layui.css" rel="stylesheet"/>
<style>
    #form1 { padding: 10px; }
    .usericon { margin-left: 0; }
</style>

<form class="layui-form" id="form1" runat="server">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">上传图片</label>
            <div class="layui-input-block">
                <button id="btnUpload" class="layui-btn" type="button">上传</button>
            </div>
        </div>
        <div class="layui-inline">
            <div class="layui-input-block usericon">
                <img id="imgShow" src="../theme/img/user.jpg" onerror="../theme/img/user.jpg" width="150" height="150" />
            </div>
        </div>
    </div>
</form>
页面布局代码

相关文章: