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 相关文章推荐
在VS2008中编译MYSQL5.1.48的方法
Jul 03 PHP
php的一些小问题
Jul 03 PHP
PHP验证码函数代码(简单实用)
Sep 29 PHP
php实现的DateDiff和DateAdd时间函数代码分享
Aug 16 PHP
php中unserialize返回false的解决方法
Sep 22 PHP
使用PHP Socket 编程模拟Http post和get请求
Nov 25 PHP
PHP实现小偷程序实例
Oct 31 PHP
微信 开发生成带参数的二维码的实例
Nov 23 PHP
php 生成加密公钥加密私钥实例详解
Jun 16 PHP
利用php + Laravel如何实现部署自动化详解
Oct 11 PHP
Thinkphp 在api开发中异常返回依然是html的解决方式
Oct 16 PHP
php使用gearman进行任务分发操作实例详解
Feb 26 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
php数组中删除元素的实现代码
2012/06/22 PHP
PHP重定向的3种方式
2013/03/07 PHP
php cURL和Rolling cURL并发方式比较
2013/10/30 PHP
网页上facebook分享功能具体实现
2014/01/26 PHP
深入理解JavaScript中为什么string可以拥有方法
2016/05/24 Javascript
bootstrap flask登录页面编写实例
2016/11/01 Javascript
JS实现物体带缓冲的间歇运动效果示例
2016/12/22 Javascript
js轮播图的插件化封装详解
2017/07/17 Javascript
Windows下快速搭建NodeJS本地服务器的步骤
2017/08/09 NodeJs
详解webpack2+node+react+babel实现热加载(hmr)
2017/08/24 Javascript
详解angularjs popup-table 弹出框表格指令
2017/09/20 Javascript
解读ES6中class关键字
2017/11/20 Javascript
Vue页面跳转动画效果的实现方法
2018/09/23 Javascript
手把手教你写一个微信小程序(推荐)
2018/10/17 Javascript
js防抖和节流的深入讲解
2018/12/06 Javascript
写一个Vue Popup组件
2019/02/25 Javascript
nodejs一个简单的文件服务器的创建方法
2019/09/13 NodeJs
解决vue一个页面中复用同一个echarts组件的问题
2020/07/19 Javascript
react ant Design手动设置表单的值操作
2020/10/31 Javascript
vue实现顶部菜单栏
2020/11/08 Javascript
vue 通过base64实现图片下载功能
2020/12/19 Vue.js
[02:04]2020年夜魇暗潮预告片
2020/10/30 DOTA
跟老齐学Python之玩转字符串(3)
2014/09/14 Python
理解生产者消费者模型及在Python编程中的运用实例
2016/06/26 Python
Django Admin 实现外键过滤的方法
2017/09/29 Python
Python功能点实现:函数级/代码块级计时器
2019/01/02 Python
与Django结合利用模型对上传图片预测的实例详解
2019/08/07 Python
Django框架获取form表单数据方式总结
2020/04/22 Python
使用html5 canvas绘制圆环动效
2019/06/03 HTML / CSS
德国传统玻璃制造商:Cristalica
2018/04/23 全球购物
static全局变量与普通的全局变量有什么区别
2014/05/27 面试题
如何在发生故障的节点上重新安装 SQL Server
2013/03/14 面试题
介绍一下Ruby中的对象,属性和方法
2012/07/11 面试题
公司员工的自我评价范例
2013/11/01 职场文书
2014基层党员干部学习全国两会心得体会
2014/03/17 职场文书
Python内置数据类型中的集合详解
2022/03/18 Python