文档章节

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

w
 wenjing521
发布于 2015/07/19 17:13
字数 574
阅读 21
收藏 0

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" onchange="upload()">
                    <input type="button" class="TK_eBtn" value="浏览图片" onclick="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>  

版权声明:本文为博主原创文章,未经博主允许不得转载。

© 著作权归作者所有

w
粉丝 1
博文 128
码字总数 20525
作品 0
海淀
私信 提问
城市群高清头像上传好像有问题

@红薯 @虫虫 @老枪 我先上传了一个小图,提示说图片小,然后又上传一个大图说图片超过了1024k然后我有上传一个小一点的,上传成功后显示的截取图片那个 图片是第一次上传的那个图片,截取后显...

尧山少侠
2013/05/16
156
5
base64格式的图片文件如何上传到阿里oss?

我要做自定义头像功能,插件截取出来的是base64格式的图片,我要上传到oss怎么搞?

一只菜鸟
2016/10/12
1K
2
struts2+jcrop上传头像问题

我想用struts2和jcrop做一个类似与本站的上传头像功能,可是我现在不知道后台程序怎么才能获取页面上截取部分的图像,求解,不胜感激…

赵益鋆
2011/06/08
2.1K
1
Startbbs V1.0.9版本发布 轻量社区系统

StartBBS(起点开源社区系统)是一个基于CI MVC框架开发的PHP新型社区系统,她轻量小巧, 简单易用,强大高效的开源论坛系统。又简称”SB(烧饼)” startbbs祝天下母亲健康长寿! V1.0.9主要...

startbbs
2013/05/13
1K
10
C# winform截图、web Cropper图片剪切、上传

今天又来一弹,写了个小功能,windows 桌面截图,web剪切图片上传的功能。 废话不多说,直接上图: 1、winform 截屏功能 图1 主窗体 点击全屏截图,就已经全屏截图了,截图后,图片保存在程序...

听风.
2018/08/10
0
0

没有更多内容

加载失败,请刷新页面

加载更多

安全组和云防火墙的区别

前言 熟悉云平台的朋友可能都会注意到这样一个事情:无论公有云还是私有云,创建虚拟机的时候都需要选择安全组,来对虚拟机进行安全防护;有的云平台在VPC里,还能选择防火墙,ZStack在3.6版...

ZStack社区版
23分钟前
2
0
教育性app开发的重要性和好处

在这个精通技术的世界中,流行的app主导着无聊的教育系统。当我们将技术和教育结合在一起时,它将带来当代以及强大的学习资源。因此,将教育移动app集成到您的学习过程中,并根据自己的信念把...

a429011717
23分钟前
3
0
IE6/7/8如何兼容CSS3属性

本文转载于:专业的前端网站➩IE6/7/8如何兼容CSS3属性 最近在工作中总是要求IE8兼容CSS3属性,在网上搜了搜主要是引入了一个htc文件(ie-css3.htc或者PIE.htc。个人认为这两个文件的作用差不...

前端老手
39分钟前
3
0
手把手教你ALLEGRO的约束规则的设置教程!

约束规则的设置 分三步, 定义规则(一、基本约束规则设置:1、线间距设置;2、线宽设置;3、设置过孔;4、区域约束规则设置;5、设置阻抗;6、设置走线的长度范围;7、设置等长:7.1、不过电阻的NET 等...

demyar
40分钟前
4
0
完美解决H5滚动滑动穿透方案:不使用系统滚动

网上有很多黑科技解决这个问题,都不是从根本去解决,例如通过js控制弹出时html加上position:fixed; 弹窗关闭后再去掉该样式,总觉得不太对,像是打补丁。 今天终于找到了滚动穿透的原因和完...

未来cc
45分钟前
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部