jquery.imgareaselect

"

<script src="__PUBLIC__/code/jquery.imgareaselect-0.9.9/scripts/jquery.imgareaselect.min.js" type="text/javascript"></script>

<link rel="stylesheet" href="__PUBLIC__/code/jquery.imgareaselect-0.9.9/css/imgareaselect-default.css" />

<div class="mask">

<iframe width="0" height="0" style="display:none;" name="upload_target"></iframe>

<form enctype="multipart/form-data" method="post" id="uploadpic" name="Filedata" target="upload_target" action="{:U('Group/Avatar/avatar',array('type'=>'upload'))}">

<input type="hidden" name="gid" value="{$groupInfo.group_id}" />

<p style="position: relative;">

    <span class="upload btn left l13"><label for="upload" οnmοuseοver="document.getElementByIdx_x('upload').style.display='block';">上传图片</label></span>

     

    <input type="file" id="upload" name="Filedata" style="display: block;opacity: 0; position:absolute;width: 150px; height: 30px;left:-125px;_left:-150px;top:0;filter: alpha(opacity=0);cursor: pointer;" />

    </p>

  </form>

<div class="picShow"><img id="photo_big" src="<if condition='$groupInfo.logo gt 1'>/data/uploads/groupavatar/{$groupInfo.group_id}/150x150.jpg?t={:time()}<else />/Public/client/images/default.png</if>" /></div>

<div id="photo"></div>

<form id="NewFileData" target="_blank" action="{:U('Group/Avatar/avatar',array('type'=>'save'))}" style="margin-top: 10px;display:none;">

<p class="confirms">

    <input type="hidden" name="gid" value="{$groupInfo.group_id}" />

<input type="hidden" name="picurl" />

<input type="hidden" name="x1" />

<input type="hidden" name="y1" />

<input type="hidden" name="x2" />

<input type="hidden" name="y2" />

<input type="hidden" name="w" />

<input type="hidden" name="h" />

<a class="btn btn-blue left pngFix" id="avatar_btn_bar">完成</a>

    <a class="btn btn-gray left l13 pngFix" id="unSetFace" οnclick="unSetFace()">取消</a>

</p>

</form>

</div>

<script type="text/javascript">

$(document).ready(function(){

    $("#upload").change(function(){

        if(checkFile()){

            $(this).css('display','none');

            $('#uploadpic').submit();

        }

         

    });

    var up_pic_width =50;

    var up_pic_height =50; 

    $('#avatar_btn_bar').click(function(){

        $.ajax({

            url: "{:U('Group/Avatar/avatar',array('type'=>'save'))}",

            data: $('#NewFileData').serialize(),

            type: "POST",

            success: function(data)

            {

                if(data == 1){

                    showTips('保存成功！','succeed');

                    change_zone.close();

                    location.reload();

                   

                }else{

                    showTips('图像上传不成功，请重新上传！','error');

                    $('#NewFileData').hide();

            $('#uploadpic').show();

                }

            }

        });

    });

});

var imgrs;

function ajax_callback(data){

txt = eval_r('('+data+')');

if(txt.code==1){

var tmpDate = new Date(); 

set_UP_W_H(txt.data['picwidth'],txt.data['picheight']);

var defautlv = ( txt.data['picwidth'] > txt.data['picheight']) ?txt.data['picheight']:txt.data['picwidth'];

$("#photo").html("<img id='photo_img' src="+txt.data['picurl'].substr(1)+'?t='+ tmpDate.getTime()+">");

        $("#photo_img").attr('src',txt.data['picurl'].substr(1)+'?t='+ tmpDate.getTime());

$("input[name=picurl]").attr('value',txt.data['picurl']);

$("#photo_big").attr('src',txt.data['picurl'].substr(1)+'?t='+ tmpDate.getTime());

imgrs = $('#photo_img').imgAreaSelect({ 

x1: 0, 

y1: 0,

    x2: 100, 

y2: 100, 

handles: true,

onInit:preview,

onSelectChange:preview,

onSelectEnd:onSelectEnd,

aspectRatio: '1:1',

instance: true,

parent:$('#photo')

});

        $('#uploadpic').hide();

$('#NewFileData').show();

    }else{

        $('#NewFileData').hide();

$('#uploadpic').show();

    }

}

//重新上传图片

function unSetFace(){

var defaultpic = '<if condition="$groupInfo.logo gt 0">/data/uploads/groupavatar/{$groupInfo.group_id}/150x150.jpg<else />/Public/client/images/default.png</if>';

$('input[name="Filedata"]').show();

if($("#photo").html()!=''){

  imgrs.setOptions({ remove:true });

  imgrs.update();

}

  $("#photo").html("");

$("input[name=picurl]").attr('value','');

  $("#photo_big").attr('src',defaultpic);

  $('#photo_big').attr('style','');

    $('#uploadpic').show();

  //$('#fileInfo').show();

$('#NewFileData').hide();

}

function set_UP_W_H(w,h){

up_pic_width = w;

up_pic_height = h;

}

function onSelectEnd(img,selection){

    $('input[name=x1]').val(selection.x1);

    $('input[name=y1]').val(selection.y1);

    $('input[name=x2]').val(selection.x2);

    $('input[name=y2]').val(selection.y2); 

    $('input[name=w]').val(selection.width); 

    $('input[name=h]').val(selection.height); 

}

function preview(img, selection) {

onSelectEnd(img,selection);

var big_scaleX = 150 / (selection.width || 1);

    var big_scaleY = 150 / (selection.height || 1);

    $('#photo_big').css({

        width: Math.round(big_scaleX * up_pic_width) + 'px',

        height: Math.round(big_scaleY * up_pic_height) + 'px',

        marginLeft: '-' + Math.round(big_scaleX * selection.x1) + 'px',

        marginTop: '-' + Math.round(big_scaleY * selection.y1) + 'px'

    });

}

function checkFile()

{

    extensions = 'jpg,gif,png';

    var path = document.getElementByIdx_x('upload').value;

    var ext = getExt(path);

    var re = new RegExp("(^|\\s|,)" + ext + "($|\\s|,)", "ig");

    if(extensions != '' && (re.exec(extensions) == null || ext == '')) {

        alert('对不起，只能上传jpg, jpeg, png, gif类型的图片');

        $('#upload').val('');

        $('#viewfile').val('');

        return false;

    }

    //showLoading();

    return true;

}

function getExt(path) {

    return path.lastIndexOf('.') == -1 ? '' : path.substr(path.lastIndexOf('.') + 1, path.length).toLowerCase();

}

function showLoading()

{

    document.getElementByIdx_x('loading_gif').style.visibility = 'visible';

}

function hideLoading()

{

    document.getElementByIdx_x('loading_gif').style.visibility = 'hidden';

}

</script>

"