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 相关文章推荐
在Zeus Web Server中安装PHP语言支持
Oct 09 PHP
PHP集成FCK的函数代码
Sep 27 PHP
php数组函数序列之asort() - 对数组的元素值进行升序排序,保持索引关系
Nov 02 PHP
php 字符串替换的方法
Jan 10 PHP
如何在smarty中增加类似foreach的功能自动加载数据
Jun 26 PHP
PHP之APC缓存详细介绍 apc模块安装
Jan 13 PHP
php计算整个目录大小的方法
Jun 19 PHP
WordPress中查询文章的循环Loop结构及用法分析
Dec 17 PHP
php脚本运行时的超时机制详解
Feb 17 PHP
PHP二进制与字符串之间的相互转换教程
Oct 14 PHP
PHP基于PDO扩展操作mysql数据库示例
Dec 24 PHP
laravel 修改记住我功能的cookie保存时间的方法
Oct 14 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中的str_repeat函数在JavaScript中的实现
2013/09/16 PHP
Yii把CGridView文本框换成下拉框的方法
2014/12/03 PHP
解析PHP之提取多维数组指定列的方法
2017/01/03 PHP
CentOS系统中PHP安装扩展的方式汇总
2017/04/09 PHP
PHP实现对xml进行简单的增删改查(CRUD)操作示例
2017/05/19 PHP
PHP基于imagick扩展实现合成图片的两种方法【附imagick扩展下载】
2017/11/14 PHP
PHP+Session防止表单重复提交的解决方法
2018/04/09 PHP
JavaScript While 循环基础教程
2007/04/05 Javascript
7款风格新颖的jQuery/CSS3菜单导航分享
2013/04/23 Javascript
公共js在页面底部加载的注意事项介绍
2013/07/18 Javascript
用js判断输入是否为中文的函数
2014/03/10 Javascript
JS+CSS实现下拉列表框美化效果(3款)
2015/08/15 Javascript
CKEditor无法验证的解决方案(js验证+jQuery Validate验证)
2016/05/09 Javascript
WebSocket+node.js创建即时通信的Web聊天服务器
2016/08/08 Javascript
Vue中如何实现轮播图的示例代码
2017/07/27 Javascript
Angularjs cookie 操作实例详解
2017/09/27 Javascript
js解决软键盘遮挡输入框的问题分享
2017/12/19 Javascript
使用bootstrap实现下拉框搜索功能的实例讲解
2018/08/10 Javascript
vue + any-touch实现一个iscroll 实现拖拽和滑动动画效果
2019/04/08 Javascript
ckeditor一键排版功能实现方法分析
2020/02/06 Javascript
VSCode插件安装完成后的配置(常用配置)
2020/08/24 Javascript
用Python实现通过哈希算法检测图片重复的教程
2015/04/02 Python
利用arcgis的python读取要素的X,Y方法
2018/12/22 Python
Python实现基于SVM的分类器的方法
2019/07/19 Python
python3 pillow模块实现简单验证码
2019/10/31 Python
使用tensorflow根据输入更改tensor shape
2020/06/23 Python
Python Matplotlib绘图基础知识代码解析
2020/08/31 Python
Python根据字典的值查询出对应的键的方法
2020/09/30 Python
联想加拿大官方网站:Lenovo Canada
2018/04/05 全球购物
外企C语言笔试题
2013/11/10 面试题
创业计划实施的7大步骤
2014/02/05 职场文书
大学军训感想
2014/02/12 职场文书
2019年大学推荐信
2019/06/24 职场文书
MySQL学习之基础操作总结
2022/03/19 MySQL
改造DE1103三步曲
2022/04/07 无线电
详解ZABBIX监控ESXI主机的问题
2022/06/21 Servers