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" target="_blank" rel="external nofollow" /> <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> "