2020-05-25

Damn! It's all notes

于 2020-05-25 02:50:06 发布

阅读量435

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/wanghuanll/article/details/106325002

版权

笔记专栏收录该内容

20 篇文章 0 订阅

订阅专栏

DZⅹ3.4万能头像上传插件

#作者:青花
#转载请注源
效果预览图
在这里插入图片描述

使用方法：
touch版：请将这两个文件上传到：/template/第三方手机模板/touch/home文件夹下，完美兼容所有手机版，细微显示差异自行调整
默认手机版：请将这两个文件上传到：/template/default/mobile/home，完美呈现。
代码：
spacecp_avatar.htm单页代码
这个页面是原创手写，调用DZx3.4电脑端的H5上传组件，移动适配方案，如果显示错位、不正常，自行将里面的CSS样式调整一下，测试过几款模板都是免调试直接兼容的，没有测试太多。
<html>
<header>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no"/>   
<style type="text/css"> 
html{
   overflow-x:hidden; 
}
body{
    overflow-x:hidden;
}
p{
    color:blue
}
table{
    margin-left:-35px;
    color:#CC2EFA;
}
a{
    text-decoration:none;
    margin-right:5px;
}

.kuang{
    border-radius:5px;
    border:2px solid #FFBF00;   
    width:95%;
    font-size:16px;
    color:#0080FF;
    padding:15px 10px 15px 10px;
    z-index:999;
}
h2{
    color:green;
}
.h2{
    color:#fff;
    padding-top:6px;
}
.a_on{
    position: absolute;
    top:15px;
    left:20px;
}

.up_kuang{
    padding:13px 9px 11px 13px;
    border:3px inset #fff013;
    border-radius:5px;
    width:auto;
    background-color:#fff033;
    margin-bottom:15px;
}
.inp{
    width:99%;
    border-radius:5px;
}
</style>    


<!--判断手机版-->
<script src="{STATICURL}js/mobile/common.js?{VERHASH}" charset="{CHARSET}"></script>
<!--判断句结束-->

<!--{hook/spacecp_avatar_top}-->
                        <script type="text/javascript">
                                function updateavatar() {
                                        window.location.href = document.location.href.replace('&reload=1', '') + '&reload=1';
                                }
                                <!--{if !$reload}-->
                                saveUserdata('avatar_redirect', document.referrer);
                                <!--{/if}-->
                        </script>
<!--引入必要JS-->        
<script type="text/javascript" src="./static/js/home.js?{VERHASH}"></script>
<script type="text/javascript" src="./static/js/common.js?{VERHASH}"></script>
<div style="width:100%;height:50px;background-color:#EE3B3B;color:#fff;">
        <center> 
            <h2 class="h2">修改头像

            <span class="a_on" onClick="javascript :history.back(-1);">返回</span></h2> 
        </center>    
    </div> 
</header>
<form id="avatarform" enctype="multipart/form-data" method="post" autocomplete="off" action="home.php?mod=spacecp&ac=avatar&ref">

<h2>我当前使用的头像</h2>
<div class="kuang">
<div class="up_kuang">    
<table>    
        <tr>
        <th  width="60%">
                    <!--调用原始头像-->
                        <!--{avatar($space[uid],big)}-->
                        <!--end-->
                </th>
                <td width="40%">
                    <h3>上传说明</h3>
                        <P>
                        <span>
                            左侧是您的原始头像预览，如果需要修改替换此头像，请在下方上传新的头像
                        </span>
                </td>
                </tr>
</table>
</div>
</div>
<h2>设置新头像</h2>
<div class="kuang">
<div class="up_kuang">   
                <span>上传说明：您可上传后点击调整裁切，建议比例1:1比例。</span>
        </div>
复制代码
spacecp_avatar_body.htm单页代码：
说明：这个页面其实是电脑版的源文件，主要是上传窗体显示调校和手机版声明一下
<meta name="viewport" content="width=device-width, initial-scale=0.8, minimum-scale=0.8, maximum-scale=0.8,user-scalable=no"/>
<div id="avatardesigner">
        <div id="avatarfileselector">
                <input type="file" name="Filedata" id="avatarfile" accept="image/*"  />
        </div>
        <div id="avataradjuster" >
                <img id="avatarimage" style="visibility: hidden;" onload="forceSelectorInsideAvatar();"  />
                <canvas id="avatarcanvas" style="position: absolute; top: 0px; left: 0px;"></canvas>
                <div id="widgetparent" style="position: absolute; left: 0px; top:0px;">
                        <div id="selector" class='ui-widget-content' style="position: absolute; width: 120px; height: 120px; overflow:hidden; cursor: move; border: 1px solid lightgrey; background-color: transparent; background-image: none;">
                        </div>
                </div>
                
                <div class="backfileselectiondiv">
                                <input type="button" name="backfileselection" class="backfileselection" value="Select File" onclick="showAvatarFileSelector();" />
                </div>
                
                <div class="saveAvatardiv" style="position: absolute;top: 80px;z-index:999;">
                        <input type="submit" name="confirm" value="{lang confirms}" class="saveAvatar"  onclick="saveAvatar();" />
                </div>
                <div id="slider" style="height: 100px; position: absolute;top: 220px; width:800;left:-120px;color:green;"></div>
                
                <input type="hidden" id="avatar1" name="avatar1" />
                <input type="hidden" id="avatar2" name="avatar2" />
                <input type="hidden" id="avatar3" name="avatar3" />
        </div>
        <div id="avatardisplayer">
                <canvas id="avatardisplaycanvas"></canvas>
                
                <div class="finishbuttondiv">
                                <input type="button" value="{lang finished}" class="finishbutton" onclick="location.reload(true);" />
                </div>
        </div>
</div>                                                                                                                

<script src="{STATICURL}js/mobile/jquery.min.js?{VERHASH}"></script>
<script type="text/javascript">
        jQuery.noConflict();
        var data = "{echo implode(",", $uc_avatarflash);}".split(',');
</script>

<link rel="stylesheet" href="{STATICURL}avatar/avatar.css?{VERHASH}" />                                                        
<script src="{STATICURL}avatar/jquery-ui.min.js?{VERHASH}"></script>
<script src="{STATICURL}avatar/avatar.js?{VERHASH}"></script>

<iframe name="uploadframe" id="uploadframe" style="display: none;"></iframe>
<iframe name="rectframe" id="rectframe" style="display: none;"></iframe>