thinkphp3.2头像上传即时显示并截取

ajax无刷新上传，不能上传type=file的文件或图片，使用iframe。

后台返回图片路径，并展示在特定位置。

利用jcrop剪切图片，获取xy坐标，和截取的宽度和高度，传给php，并实现相应操作。

下面上一些代码。

<form id="submit" action="{:U('User/up_photo')}" enctype="multipart/form-data"  target="upframe" method="post">
                    <input type="file" name="TK_eFile" class="TK_eFile" id="TK_eFile" οnchange="upload()">
                    <input type="button" class="TK_eBtn" value="浏览图片" οnclick="document.getElementById('TK_eFile').click()">
</form>
<iframe id="upframe" name="upframe" style="display:none"></iframe>  

function upload(){
var url="__URL__/up_photo";
$('#submit').submit();
}

 //上传头像
    public function up_photo(){
        $upload = new \Think\Upload();// 实例化上传类
        $upload->maxSize   =     3145728 ;// 设置附件上传大小
        $upload->exts      =     array('jpg', 'gif', 'png', 'jpeg');// 设置附件上传类型
        $upload->rootPath  =     './Uploads/'; // 设置附件上传根目录
        $upload->savePath  =     ''; // 设置附件上传（子）目录
        $upload->thumbType = 0;// 缩略图生成方式 1 按设置大小截取 0 按原图等比例缩略
        // 上传文件 
        $info   =   $upload->upload();
        
        $lujing=__ROOT__."/Uploads/".$info['TK_eFile']['savepath'].$info['TK_eFile']['savename'];
        //echo $lujing;
        //$this->ajaxReturn(array("data"=>$lujing,"info"=>$lujing,"status"=>1));
        echo '<script>parent.add("'.$lujing.'")</script>';
    }

function add(data){
    $('#target').attr("src",data);
    $('.jcrop-preview').attr("src",data);
    $('#ximg').attr("value",data);

}

上面是无刷新上传主要代码。

<script>

    jQuery(function($){


    // Create variables (in this scope) to hold the API and image size
    var jcrop_api,
        boundx,
        boundy,


        // Grab some information about the preview pane
        $preview = $('#preview-pane'),
        $pcnt = $('#preview-pane .preview-container'),
        $pimg = $('#preview-pane .preview-container img'),


        xsize = $pcnt.width(),
        ysize = $pcnt.height();
    
    console.log('init',[xsize,ysize]);
    $('#target').Jcrop({
      onChange: updatePreview,
      onSelect: updatePreview,
      aspectRatio: xsize / ysize
    },function(){
      // Use the API to get the real image size
      var bounds = this.getBounds();
      boundx = bounds[0];
      boundy = bounds[1];
      // Store the API in the jcrop_api variable
      jcrop_api = this;


      // Move the preview into the jcrop container for css positioning
      $preview.appendTo(jcrop_api.ui.holder);
    });


    function updatePreview(c)
    {
      if (parseInt(c.w) > 0)
      {
        var rx = xsize / c.w;
        var ry = ysize / c.h;


        $pimg.css({
          width: Math.round(rx * boundx) + 'px',
          height: Math.round(ry * boundy) + 'px',
          marginLeft: '-' + Math.round(rx * c.x) + 'px',
          marginTop: '-' + Math.round(ry * c.y) + 'px'
        });
        $('#x').val(c.x);  
        $('#y').val(c.y);  
        $('#w').val(c.w);  
        $('#h').val(c.h);
      }
    };


  });
  $('.TK_eSave').click(function(){
      var url="__URL__/photo_crop";
      $('#pic').submit();
//            $.post($('#pic').attr('action'),$('#pic').serialize(),function(data) {
//                alert(data);
//                //$('#pic').attr('send','on');
//                if(!data.status) {alert(data.info); _loading_box.remove(); }
//                else location.reload();
//            },'json');
        });
}
</script>
<script src="__PUBLIC__/js/jquery.Jcrop.js"></script>

 <div class="TK_eHeadCont">
                <div class="TK_eHeadC" id="image"><img src="" id="target"  height=300 width=300 /></div>
                <div id="preview-pane">
    <div class="preview-container">
      <img src="" class="jcrop-preview" alt="Preview" />
    </div>
  </div>
            </div>
        <form id="pic" action="{:U('User/photo_crop')}" method="post">  
            <input type="hidden" id="x" name="x" />  
            <input type="hidden" id="y" name="y" />  
            <input type="hidden" id="w" name="w" />  
            <input type="hidden" id="h" name="h" />  
            <input type="hidden" id="ximg" name="ximg" />
        </form>