PHP+ajaxfileupload+jcrop插件完美实现头像上传剪裁


Posted in PHP onJune 09, 2014

昨天花了点时间整合了一下头像插件 东拼西凑的成果 先来看下效果

PHP+ajaxfileupload+jcrop插件完美实现头像上传剪裁

1.先使用ajaxfileupload插件做异步上传。这个地方我本来想做个上传进度的效果,但技术有限失败了。上传按钮我还做了一个文件大小的限制,但是由于浏览器兼容性的问题,不完美在IE6--IE9之间还有很多问题需要解决

getFileSize函数是用于判断文件大小的函数

function getFileSize(fileName) {
                var byteSize = 0;
                //console.log($("#" + fileName).val());
                if($("#" + fileName)[0].files) {
                    var byteSize  = $("#" + fileName)[0].files[0].size;
                }else {
    //此处由于有浏览器兼容问题 还没完成大小判断的逻辑
                }
                //alert(byteSize);
                byteSize = Math.ceil(byteSize / 1024) //KB
                return byteSize;//KB
            }

2.按钮上传事件绑定

$("#btnUpload").click(function () {
                var allowImgageType = ['jpg', 'jpeg', 'png', 'gif'];
                var file = $("#file1").val();
                //获取大小
                var byteSize = getFileSize('file1');
                //获取后缀
                if (file.length > 0) {
                    if(byteSize > 2048) {
                        alert("上传的附件文件不能超过2M");
                        return;
                    }
                    var pos = file.lastIndexOf(".");
                    //截取点之后的字符串
                    var ext = file.substring(pos + 1).toLowerCase();
                    //console.log(ext);
                    if($.inArray(ext, allowImgageType) != -1) {
                        ajaxFileUpload();
                    }else {
                        alert("请选择jpg,jpeg,png,gif类型的图片");
                    }
                }
                else {
                    alert("请选择jpg,jpeg,png,gif类型的图片");
                }
            });

3.在上传成功后返回图片路径,并初始化图片裁剪。图片裁剪就直接用ajax请求到php

function ajaxFileUpload() {
                $.ajaxFileUpload({
                    url: 'action.php', //用于文件上传的服务器端请求地址
                    secureuri: false, //一般设置为false
                    fileElementId: 'file1', //文件上传空间的id属性  <input type="file" id="file" name="file" />
                    dataType: 'json', //返回值类型 一般设置为json
                    success: function (data, status)  //服务器成功响应处理函数
                    {
                        //var json = eval('(' + data + ')');
                        //alert(data);
                        $("#picture_original>img").attr({src: data.src, width: data.width, height: data.height});
                        $('#imgsrc').val(data.path);
                        //alert(data.msg);
                        //同时启动裁剪操作,触发裁剪框显示,让用户选择图片区域
                        var cutter = new jQuery.UtrialAvatarCutter({
                                //主图片所在容器ID
                                content : "picture_original",
                                //缩略图配置,ID:所在容器ID;width,height:缩略图大小
                                purviews : [{id:"picture_200",width:200,height:200},{id:"picture_50",width:50,height:50},{id:"picture_30",width:30,height:30}],
                                //选择器默认大小
                                selector : {width:200,height:200},
                                showCoords : function(c) { //当裁剪框变动时,将左上角相对图片的X坐标与Y坐标 宽度以及高度
                                    $("#x1").val(c.x);
                                    $("#y1").val(c.y);
                                    $("#cw").val(c.w);
                                    $("#ch").val(c.h);
                                },
                                cropattrs : {boxWidth: 500, boxHeight: 500}
                            }
                        );
                        cutter.reload(data.src);
                        $('#div_avatar').show();
                    },
                    error: function (data, status, e)//服务器响应失败处理函数
                    {
                        alert(e);
                    }
                })
                return false;
            }
            $('#btnCrop').click(function() {
                $.getJSON('action2.php', {x: $('#x1').val(), y: $('#y1').val(), w: $('#cw').val(), h: $('#ch').val(), src: $('#imgsrc').val()}, function(data) {
                    alert(data.msg);
                });
                return false;
            });

4.HTML文件代码如下

<body>
    <p><input type="file" id="file1" name="file1" /></p>
    <input type="button" value="上传" id="btnUpload"/>
    <div style="display:none;overflow:hidden" id="div_avatar">
        <div style="width:500px;height:500px;overflow:hidden;float:left;" id="picture_original"><img alt="" src="" /></div>
        <div id="picture_200" style="float:left;margin-left:20px"></div>
        <div id="picture_50" style="float:left;margin-left:20px"></div>
        <div id="picture_30" style="float:left;margin-left:20px"></div>
        <input type="hidden" id="x1" name="x1" value="0" />
        <input type="hidden" id="y1" name="y1" value="0" />
        <input type="hidden" id="cw" name="cw" value="0" />
        <input type="hidden" id="ch" name="ch" value="0" />
        <input type="hidden" id="imgsrc" name="imgsrc" />
        <input type="button" value="裁剪上传" id="btnCrop"/>
    </div>
</body>

现在还很粗糙,功能还有很多需要完善的地方。大家有兴趣的话,就拿去使用吧。如果完善了进度条和文件大小的功能,记得也分享给我一份哦。

附上源码 https://3water.com/codes/174384.html

PHP 相关文章推荐
对text数据类型不支持代码页转换 从: 1252 到: 936
Apr 23 PHP
如何突破PHP程序员的技术瓶颈分析
Jul 17 PHP
Thinkphp模板中使用自定义函数的方法
Sep 23 PHP
浅谈PHP与C#的值类型指向区别的详解
May 21 PHP
php中并发读写文件冲突的解决方案
Oct 25 PHP
php中call_user_func函数使用注意事项
Nov 21 PHP
迪菲-赫尔曼密钥交换(Diffie?Hellman)算法原理和PHP实现版
May 12 PHP
修改PHP脚本使WordPress拦截垃圾评论的方法示例
Dec 10 PHP
php类中的$this,static,final,const,self这几个关键字使用方法
Dec 14 PHP
用PHP的socket实现客户端到服务端的通信实例详解
Feb 04 PHP
解决laravel资源加载路径设置的问题
Oct 14 PHP
php中Swoole的热更新实现代码实例
Mar 04 PHP
神盾加密解密教程(三)PHP 神盾解密工具
Jun 08 #PHP
神盾加密解密教程(二)PHP 神盾解密
Jun 08 #PHP
IIS6.0 开启Gzip方法及PHP Gzip函数分享
Jun 08 #PHP
PHP获取中英混合字符串长度的方法
Jun 07 #PHP
使用PHP破解防盗链图片的一个简单方法
Jun 07 #PHP
PHP防止post重复提交数据的简单例子
Jun 07 #PHP
解决PhpMyAdmin中导入2M以上大文件限制的方法分享
Jun 06 #PHP
You might like
老照片 - 几十年前的收音机与人
2021/03/02 无线电
PHP连接SQLSERVER 注意事项(附dll文件下载)
2012/06/28 PHP
PHP实现今天是星期几的几种写法
2013/09/26 PHP
PHP调用wsdl文件类型的接口代码分享
2014/11/19 PHP
PHP技术开发微信公众平台
2015/07/22 PHP
PHP中仿制 ecshop验证码实例
2017/01/06 PHP
PHP7新功能总结
2019/04/14 PHP
类似GMAIL的Ajax信息反馈显示
2010/02/16 Javascript
屏蔽F1~F12的快捷键的js函数
2010/05/06 Javascript
jquery中ajax学习笔记3
2011/10/16 Javascript
如何让easyui gridview 宽度自适应窗口改变及fitColumns应用
2013/01/25 Javascript
jquery实现图片按比例缩放示例
2014/07/01 Javascript
JavaScript提高性能知识点汇总
2016/01/15 Javascript
jQuery插件实现带圆点的焦点图片轮播切换
2016/01/18 Javascript
Angular.js中用ng-repeat-start实现自定义显示
2016/10/18 Javascript
jQuery窗口拖动功能的实现代码
2017/02/04 Javascript
websocket+node.js实现实时聊天系统问题咨询
2017/05/17 Javascript
JS实现多级菜单中当前菜单不随页面跳转样式而发生变化
2017/05/30 Javascript
Vue组件中slot的用法
2018/01/30 Javascript
基于 Immutable.js 实现撤销重做功能的实例代码
2018/03/01 Javascript
[06:45]DOTA2-DPC中国联赛 正赛 Magma vs LBZS 选手采访
2021/03/11 DOTA
python实现代理服务功能实例
2013/11/15 Python
python实现rest请求api示例
2014/04/22 Python
python执行等待程序直到第二天零点的方法
2015/04/23 Python
Python实现爬取逐浪小说的方法
2015/07/07 Python
关于python pyqt5安装失败问题的解决方法
2017/08/08 Python
Python对List中的元素排序的方法
2018/04/01 Python
postman传递当前时间戳实例详解
2019/09/14 Python
Bonami斯洛伐克:购买家具和家居饰品
2019/07/02 全球购物
同步和异步有何异同,在什么情况下分别使用他们?
2012/12/28 面试题
酒店执行总经理岗位职责
2013/12/15 职场文书
仓管员岗位职责
2015/02/03 职场文书
2019 入党申请书范文
2019/07/10 职场文书
开学季:喜迎新生,迎新标语少不了
2019/11/07 职场文书
MySQL InnoDB ReplicaSet(副本集)简单介绍
2021/04/24 MySQL
pytorch--之halfTensor的使用详解
2021/05/24 Python