2020-05-27

DⅰscuzⅩ3.4万能头像上传插件升级版

spacecp_avatar.htm单页代码(CSS布局优化)
<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;
    height:100%;
}

table{
    margin-left:-35px;
    color:#CC2EFA;
}
a,span{
    text-decoration:none;
    margin-right:5px;
    line-height:8px;
    font-size:13px;
}
.kuang{
    border-radius:5px;
    border:2px solid #FFBF00;   
    width:93%;
    font-size:16px;
    color:#0080FF;
    padding:15px 10px 10px 10px;
    z-index:999;
}
h2{
    color:green;

}
.h22{
    margin-top: 70px;
}
.h2{
    color:#fff;
    line-height:12px;
}
.bt{
    width:96.6%;
    height:50px;
    background-color:#EE3B3B;
    border-radius:5px;
    position: absolute;
}
.a_on{
    position: absolute;
    top:20px;
    left:15px;
}

.up_kuang{
    padding:13px 9px 10px 13px;
    border:3px inset #fff013;
    border-radius:5px;
    width:auto;
    background-color:#fff033;
    margin-bottom:15px;
    text-align: center;
    height:auto;
}
.up_kuang2{
    padding:18px 9px 18px 9px;
    border:5px inset #EB7E55;
    border-radius:5px;
    width:60%;
    background-color:#EB9E55;
    margin-bottom:15px;
    text-align: center;
    margin: 0 auto;
}
.up_kuang3{
    overflow-x:auto;
    width:auto;
}
</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 class="bt">
        <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 class="h22">我当前使用的头像</h2>
<div class="kuang">
   
<div class="up_kuang">  
<span>当前头像预览，修改之后将不可恢复 </span>
</div>
<div class="up_kuang2"> 
<!--调用原始头像-->
<!--{avatar($space[uid],big)}-->
<!--end-->
</div>
</div>
<h2>设置新头像</h2>
<div class="kuang">
<div class="up_kuang">   
                <a><p>1.建议上传尺寸250x250以内</p>
                <p>2.图片太大将会显示为纯黑色</p></a>
        </div>
<div class="up_kuang3">           
        <center>

                        <!--{if !empty($_GET['old'])}-->
                        <script type="text/javascript">document.write(AC_FL_RunContent('<!--{echo implode("','", $uc_avatarflash);}-->'));</script>
                        <!--{else}-->                                                        
                    <!--{template touch/home/spacecp_avatar_body}-->
                        <!--{/if}-->                                                        

                                <input type="hidden" name="formhash" value="{FORMHASH}" />
                        </form>
                        <!--{hook/spacecp_avatar_bottom}-->
                </center>                
</div>
</div>
</html>
复制代码


spacecp_avatar_body.htm单页代码（框体显示细节调整）
<style type="text/css"> 
#avatardesigner{border: 1px solid #CCC;padding: 10px;overflow: hidden;}
#avataradjuster, #avatardisplayer{position: relative; display:none;width:100%;height:100%;}
#avatardisplaycanvas{position: absolute; top: 0px; left: 0px;background:#FFF;}
#avatarfileselector{
    background:url(static/avatar/avatar_upload.gif) no-repeat;
    position:relative;
}
#avatarfile{
        font-size: 300px;
    position:absolute;
    right:0;
    top:0;
    opacity: 0;
    filter:alpha(opacity=0);
    cursor:pointer;
}
.backfileselectiondiv{
    width: 104px;
    height: 33px;
    position: absolute;
    right: 8px;
    top: 0px;
    background:url(static/avatar/avatar_back.gif) no-repeat;
}
.backfileselection{
        width: 104px;
    height: 33px;
        padding: 2px;
    position:absolute;
    right:0;
    top:0;
    opacity: 0;
    filter:alpha(opacity=0);
        cursor:pointer;
        border:none;
}
.saveAvatardiv{
    width: 104px;
    height: 39px;
    position: absolute;
    right: 8px;
    top: 180px; 
    background:url(static/avatar/avatar_save.gif) no-repeat;
}
.saveAvatar{
    width: 104px;
    height: 39px;
        padding: 2px;
    position:absolute;
    right:0;
    top:0;
    opacity: 0;
        filter:alpha(opacity=0);
        border:none;
    cursor:pointer;
}
.finishbuttondiv{
    width: 92px;
    height: 33px;
    position: absolute;
    right: 60px;
    top: 190px;
    margin-right: 60px;
        background:url(static/avatar/avatar_finishbutton.gif) no-repeat;
}
.finishbutton{
    width: 92px;
    height: 33px;
        padding: 2px;
    position:absolute;
    right:0;
    top:0;
    opacity: 0;
    filter:alpha(opacity=0);
    cursor:pointer;
        border: none;
}
.ui-slider .ui-slider-handle {
        position: absolute;
        z-index: 2;
        width: 1.2em;
        height: 1.2em;
        cursor: default;
        -ms-touch-action: none;
        touch-action: none;
}
.ui-slider .ui-slider-range {
        position: absolute;
        z-index: 1;
        font-size: .7em;
        display: block;
        border: 0;
        background-position: 0 0;
}

/* support: IE8 - See #6727 */
.ui-slider.ui-state-disabled .ui-slider-handle,
.ui-slider.ui-state-disabled .ui-slider-range {
        filter: inherit;
}

.ui-slider-horizontal {
        height: .8em;
}
.ui-slider-horizontal .ui-slider-handle {
        top: -.3em;
        margin-left: -.6em;
}
.ui-slider-horizontal .ui-slider-range {
        top: 0;
        height: 100%;
}
.ui-slider-horizontal .ui-slider-range-min {
        left: 0;
}
.ui-slider-horizontal .ui-slider-range-max {
        right: 0;
}

.ui-slider-vertical {
        width: .8em;
        height: 100px;
}
.ui-slider-vertical .ui-slider-handle {
        left: -.3em;
        margin-left: 0;
        margin-bottom: -.6em;
}
.ui-slider-vertical .ui-slider-range {
        left: 0;
        width: 100%;
}
.ui-slider-vertical .ui-slider-range-min {
        bottom: 0;
}
.ui-slider-vertical .ui-slider-range-max {
        top: 0;
}
#slider .ui-state-default {
    background: white url(static/avatar/arrow_down_big.gif) no-repeat scroll 50% 50%;
    margin-top: -8px;
    border-width: 0px;
    z-index:999;
}
.ui-widget-content {
        border: 1px solid #aaaaaa;
        background: red url("") 50% 50% repeat-x;
        color: #222222;
</style> 

<div id="avatardesigner">
<div id="avatarfileselector">
<input type="file" name="Filedata" id="avatarfile" accept="image/*"  /> 
</div>    

        <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>
<!--背景图盒子,ID为隐藏属性，当上传之后，属性发生改变，即显示-->                
                <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" style="position: absolute;top: 60px;">
                                <input type="button" name="backfileselection" class="backfileselection" value="Select File" onclick="showAvatarFileSelector();" />
                </div>
<!--选择确定按钮-->                 
                <div class="saveAvatardiv" style="position: absolute;top: 120px;z-index:999;">
  <!--提交保存按钮-->                     
                        <input type="submit" name="confirm" value="{lang confirms}" class="saveAvatar"  onclick="saveAvatar();" />
                </div>
   <!--缩放选择器-->                  
                <div id="slider" style="height: 5px; position: absolute;top: 15px; width:100;left:160px;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>
                                                                                                                
<!--引入上传JS组件-->   
<script src="{STATICURL}js/mobile/jquery.min.js?{VERHASH}"></script>
<!--UCENTER传参-->   
<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>
复制代码


2020年05月25日更新：
内容：修复382DPI以下的手机上传框体超出屏幕范围：
使用方法：以下代码覆盖源文件
spacecp_avatar.htm单页代码(CSS布局优化)
代码已经升级并删除
spacecp_avatar_body.htm单页代码（框体显示细节调整）
代码已经升级并删除
预览图：（这是电脑浏览器的开发者模式截图，手机上显示的会更漂亮简洁。）