头像裁剪上传插件php,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,gif类型的图片");
}
});
3.在上传成功后返回图片路径,并初始化图片裁剪。图片裁剪就直接用ajax请求到PHP
代码如下:
function ajaxFileUpload() {
$.ajaxFileUpload({
url: 'action.PHP',//用于文件上传的服务器端请求地址
secureuri: false,//一般设置为false
fileElementId: 'file1',//文件上传空间的id属性
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,
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文件代码如下
代码如下:
头像裁剪上传插件php,PHP+ajaxfileupload+jcrop插件完美实现头像上传剪裁相关推荐
- Android高仿微信头像裁剪
最近公司的APP很多用户反应无法上传头像,于是打算修改原来头像裁剪的代码.参考微信.QQ.唱吧头像裁剪的操作,决定就仿微信头像裁剪来上传用户头像,在Android大神鸿洋的一篇高仿微信头像的博客(博客 ...
- 头像裁剪上传插件php,yii2.0 上传头像插件(可裁剪)yii2-avatar扩展包
1.yii2.0 上传头像插件包名 基于cropper的一款头像上传yii2组件 包名: composer require daimakuai/yii2-avatar 2.截图 3.yii2.0 上传 ...
- jcrop php 头像裁剪,上传裁剪头像(Jcrop)
上传裁剪头像(Jcrop) -- by Stephen 2016/1/24 20:17:21 总体思路:用户点击选择头像按钮,选好图片后jcrop所在的div以遮罩层的形式显示,此时异步更新图片的sr ...
- 基于cropper和sweetalert的简单图片/头像裁剪上传
基本功能 前端基本样式: 进行图片裁剪及上传: 点击上传后,js会将截取到的数据转为图片数据利用ajax发送给后台进行存储.存储成功后,刷新前端页面,头像改变. 上传成功后:自动刷新网页,更改头像 基 ...
- DISCUZ论坛插件h5手机电脑头像上传3.7.1带扩展插件【收集免费分享】
一个支持电脑和手机h5技术头像上传的插件. 说明:本插件h5电脑版和h5手机版为自主全新开发的触屏版头像上传,体验好,性能好,绿色. 主要特点:支持H5电脑版和H5手机版头像上传. 支持鼠标和触屏操作 ...
- android仿支付宝头像裁剪,易用的头像裁剪上传、头像美化组件
更新记录 3.4.2(2020-06-30) 参数优化 3.3.4(2020-06-24) 支付宝平台必须填写noTab参数 查看更多 十分抱歉,因为精力有限,本插件暂停维护 注意: 1) H5平台, ...
- ajaxFileUpload.js插件支持多文件上传的方法
前提条件: ajaxFileUpload.js插件多文件上传 步骤: 1.修改源码,(源码只支持单个文件的上传): 复制代码 代码如下: //修改前代码------- //var oldElement ...
- 【Bootstrap-插件使用】Jcrop+fileinput组合实现头像上传功能
作者:Dreawer 链接:https://zhuanlan.zhihu.com/p/24465742 来源:知乎 著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 作者:梦游的龙 ...
- cropbox php,jQuery用户头像裁剪插件cropbox.js实例分享
本文主要为大家详细介绍了jQuery用户头像裁剪插件cropbox.js的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能帮助到大家. 几乎每一个网页是必备图片上传,图片裁剪功能,这 ...
最新文章
- 工作130:computed
- 手把手教你从0-1做一张酷炫驾驶舱,让老板对你赞不绝口
- 长沙android工程师,长沙安卓工程师辅导
- Fiddler—PC上实现手机的抓包
- kettle 下载地址
- Android URL Scheme
- IOS和安卓微信打开网页,界面显示差异大的问题。
- sql条件查询表数据条数
- ubuntu 国内源列表
- SAP 标准成本、计划成本、目标成本、实际成本计算公式
- 微信公众平台开发--入门了解
- Qualtrics初体验——10年不融资,价值80亿美金
- 记录一下自己配置Tomcat(9.0.69)
- MATLAB视频截取和缩放
- 基于python的报修系统_基于JSP的学生公寓报修管理系统.doc
- Microsoft Office Word、Excel 和 PowerPoint 2007 文件格式兼容包(简体中文)
- 平安京因服务器升级维护,【平安京维护解读】3月15日更新速递
- linux安装拼音输入法
- 易语言X64封包课程
- 什么是composer
热门文章
- 推荐一款功能强大的Tomcat 管理监控工具,可替代Tomcat Manager
- CFX计算报错和相应解决办法(浮点错误等-持续更新)
- 的it生活_在日本生活了10年的IT女,聊聊回国工作的亲身经历
- java 字符表 chr3,VBS CHR码值对应列表
- how to write a php framework,怎么一步步编写简单的PHP的Framework(十四)
- 计算机供用户使用的内存区域,操作系统期末考试试卷三)
- 二叉树的最小深度Python解法
- arma模型平稳性和可逆性的条件_时间序列预测模型ARIMA实现
- html5步骤条,自定义步骤条 , 纯原生html + css
- python学习-syspath、系统内置模块