php flash 图片上传,php+jquery+ajax无刷新图片上传裁切,模拟flash头像上传实例
这几天自己在写一个cms.之前在用到图片上传裁切的时候总是用的flash的,或者是swfupload之类的。用的还不熟练,所以今天就用ajax做一个图片上传裁切的实例.个人感觉还不错,现在就分享出来.我用的是ThinkPHP的框架,先将用到的插件分享出来. demo下载
ajaxfileupload.js ajax上传文件的插件。
jquery.imgareaselect.min.js 图片裁切插件
jquery.min.js jquery框架文件
先写好需要的样式
对应的html代码
上传图片
样式css
div.clearfix{clear:both;}
div.dialog{display:none;}
div.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1030;background-color:#000;opacity:0.5;}
.jcrop-holder #preview-pane {
display:block;
position:absolute;
z-index:2000;
top:10px;
right:-240px;
padding:6px;
background-color:white;
}
#preview-pane .preview-container {
width:160px;
height:120px;
overflow:hidden;
}
div.jcrop-holder{
width:400px;
}
ok,然后开始第一步,要先实现弹窗效果。点击上传按钮弹出class=dialog上传图片的div。
$('.OpenDialog').click(function(){
$('div.dialog').show();
$('
return false;
})
第二步是点击上传文件就上传并且无刷新替换到预览区域的图片地址
$('form.ajaxPic').submit(function(){
$.ajaxFileUpload({
url: $(this).attr('action'),
secureuri: false,
fileElementId: 'tt',
dataType: 'json',
success: function(ajax){
var img1 = $('div.jc-demo-box').find('img');
var $pimg = $('.jcrop-preview');
var $pcnt = $('#preview-pane .preview-container'), xsize = $pcnt.width(), ysize = $pcnt.height();
var $preview = $('#preview-pane');
img1.attr('src', ajax.data);
$('input[type=hidden][name=filename]').val(ajax.data);
$('').attr('src', ajax.data).load(function(){
$('#target').css({
width: this.width,
height: this.height,
})
$pimg.css({
width: this.width,
height: this.height,
})
})
$('#target').imgAreaSelect({
aspectRatio: '160:120',
onSelectChange: preview
});
function preview(img, selection){
var scaleX = 160 / selection.width;
var scaleY = 120 / selection.height;
var width = $('#target').width();
var height = $('#target').height();
$('.jcrop-preview').css({
width: Math.round(scaleX * width) + 'px',
height: Math.round(scaleY * height) + 'px',
marginLeft: '-' + Math.round(scaleX * selection.x1) + 'px',
marginTop: '-' + Math.round(scaleY * selection.y1) + 'px'
});
$('#x').val(selection.x1);
$('#y').val(selection.y1);
$('#x1').val(selection.x2);
$('#y1').val(selection.y2);
$('#w').val(selection.width);
$('#h').val(selection.height);
}
}
})
return false;
})
这里用到了ajax上传的插件,在上传成功以后,则加载裁切程序。aspectRatio: '160:120' ,这部分是裁切区域的比例,如果没有指定则可以自由裁切。
最后在点击完成裁切以后,则隐藏弹出框并且把地址带回。
//ajax上传裁切
$('form.ajaxCut').submit(function(){
var thumbnail = $('.img-thumbnail');
var dialog = $('.dialog');
$.ajax({
url: $(this).attr('action'),
type: 'post',
data: $(this).serialize(),
dataType: 'json',
success: function(ajax){
thumbnail.attr('src', ajax.data);
$('#pics').val(ajax.data);
$('input[type=button].closeDialog').trigger('click');
}
})
return false;
})
图片上传对应的php代码
function uploadsImg(){
import('ORG.Net.UploadFile');
$upload = new UploadFile();// 实例化上传类
$upload->maxSize = 3145728 ;// 设置附件上传大小
$upload->allowExts = array('jpg', 'gif', 'png', 'jpeg');// 设置附件上传类型
$savePath='./uploads/'.date('Ymd').'/';
if (!file_exists($savePath)){
if (!mkdir($savePath)){
$this->ajaxReturn('创建文件夹'.$savePath.'失败,请检查uploads文件夹权限是否为777');
}
}
$upload->savePath =$savePath; // 设置附件上传目录
if(!$upload->upload()) {// 上传错误提示错误信息
$info=$upload->getErrorMsg();
}else{// 上传成功 获取上传文件信息
$info = $upload->getUploadFileInfo();
}
if (!is_array($info)){
$this->ajaxReturn($info);
}else{
import('ORG.Net.Image');
$img=new Image($info[0]['savepath'].$info[0]['savename'],1,'320','240',$info[0]['savepath'].'s_'.$info[0]['savename']);
$img->outimage();
$picRealPath=J(__ROOT__.'/'.$img->getImageName());
$this->ajaxReturn($picRealPath);
}
}
这里用到的就是ThinkPHP自带的图片上传,但是在上传以后,为了不让太大,太小或者不规则的图影响到裁切时候的效果,所以适当对图片做了下裁切。然后将图片上传的地址返回给ajax
图片裁切代码
function cutImg(){
$dfile='./uploads/'.date('Ymd').'/';
if(!file_exists($dfile)){
if (!mkdir($dfile)){
$this->ajaxReturn('创建文件夹'.$dfile.'失败,请检查uploads文件夹权限是否为777');
}
}
$sfile=$_REQUEST['filename'];
$sfile=str_replace(__ROOT__, '.', $sfile);
$file_tmp=explode('/', $sfile);
$file=$file_tmp[count($file_tmp)-1];
$x=$_REQUEST['x'];
$y=$_REQUEST['y'];
$x1=$_REQUEST['x1'];
$y1=$_REQUEST['y1'];
$width=$_REQUEST['w'];
$height=$_REQUEST['h'];
import('ORG.Net.Image');
$value1=$x.','.$y;
$value2=$width.','.$height;
$dfile=$dfile.'small_'.$file;
$img=new Image($sfile,2,$value1,$value2,$dfile);
$img->outimage();
$filename=$img->getImageName();
$filename=J(__ROOT__.'/'.$filename);
$this->ajaxReturn($filename);
}
图片裁切就是通过坐标以及裁切时候的大小,返回到php的类里去完成最后的裁切。
打赏
微信扫一扫,打赏作者吧~
如果本篇文章对您有帮助,欢迎向博主进行赞助,赞助时请写上您的用户名。
支付宝直接捐助帐号oracle_lee@qq.com 感谢支持!
喜欢 (0)or分享 (0)
php flash 图片上传,php+jquery+ajax无刷新图片上传裁切,模拟flash头像上传实例相关推荐
- php jquery ajax裁剪图照片,php+jquery+ajax无刷新图片上传裁切,模拟flash头像上传实例...
这几天自己在写一个cms.之前在用到图片上传裁切的时候总是用的flash的,或者是swfupload之类的.用的还不熟练,所以今天就用ajax做一个图片上传裁切的实例.个人感觉还不错,现在就分享出来. ...
- JQUERY AJAX无刷新异步上传文件
AJAX无刷新上传文件并显示 http://blog.csdn.net/gao3705512/article/details/9330637?utm_source=tuicool jQuery For ...
- 利用jquery.form.js实现Ajax无刷新图片上传及预览功能
某些时候当我们做登记页面的时候可能需要上传图片,并实现即时预览的功能. 如果只是预览而不上传,可以使用ImagePreview来实现,方便简单.如果需要上传,那么你也可以使用uploadify无刷新上 ...
- jquery+ajax无刷新翻页
前台自定义通用分页jquery插件 (一)框架:用jquery+ajax+struts1实现 自动创建行和列 持久层用的是abatis.数据库用的是MySQL. ( ...
- PHP jQuery Ajax 无刷新表单提交实例
采用 PHP 为后台,前端使用强大的 jQuery 库,可以很快写一个无刷新的表单实例. 整个过程分为两部分,一部分是 HTML 和 JS 文件,另一部分是 PHP 代码,返回服务器的响应. HTML ...
- jquery ajax无刷新请求Struts2验证用户名密码数据库是否存在
通过ajax请求验证后台数据是否存在. 首先导入struts2的核心包. 后台Action代码 import com.opensymphony.xwork2.ActionSupport;public ...
- html5拖拽图片批量ajax无刷新进度上传
1.前端拖拽图片 之前有篇文章说到HTML5的拖拽(drag.drop,详见:/post/jquery-plugin-1-jquery-drag-and-html5-draggable-api-and ...
- 移动端图片上传解决方案localResizeIMG先压缩后ajax无刷新上传
现在科技太发达,移动设备像素越来越高,随便一张照片2M+,但是要做移动端图片上传和pc上略有不同,移动端你不能去限制图片大小,让用户先处理图片再上传,这样不现实.所以理解的解决方案就是在上传先进行图片 ...
- ASP.NET工作笔记之一:图片上传预览及无刷新上传
转自:http://www.cnblogs.com/sibiyellow/archive/2012/04/27/jqueryformjs.html 最近项目里面涉及到无刷新上传图片的功能,其实也就是上 ...
最新文章
- plotly同时可视化表格与图(plotly Table and Chart )
- ACM中出现RuntimeError的原因及可能的解决办法
- 实现权限控制_Spring自定义注解+AOP实现权限控制
- 字节跳动offer流程多长时间_字节跳动-运营实习生-面经实录(已Offer??)
- mysql5.6 python_Centos-6.5 + python3 + mysql5.6 环境搭建
- Clob类型转换为String
- 谷歌开源Allstar 项目,保护GitHub 仓库安全
- 怎么将查询到的数据表传到文本区_60秒上手Treelab (二):入门数据表
- Neural Architecture Search(NAS)强化学习寻找最优网络、NASNet、MNASNet
- linux下rpm包安装jdk,linux jdk rpm包安装
- 太干了,Android 抓包姿势总结!
- 某互联网大厂亿级大数据服务平台的建设和实践
- 1415-2结对分组情况
- PHP开发基于Mirai的QQ机器人(一)
- RuntimeError: expected scalar type Double but found Float
- Access update语句 提示 操作必须使用一个可更新的查询Access update语句 提示 操作必须使用一个可更新的查询
- 深度强化学习+启发人类的决策智能,专访一家有愿景的中国企业「启元世界」... 1
- 第一章 JDBC基础操作 ② 代码
- Linux程序设计(Linux shell编程的例子:总结)
- C++里已知三个三维点,求他们的平面方程,怎么做?
热门文章
- android wifi定位不了,h5网页使用高德地图定位正常,网页嵌入安卓app后wifi定位正常,4g网络无法定位?...
- c++小项目:基于STL的演讲比赛流程管理系统
- 网络基础 - 探秘无线速度(一)
- em在聊天中是什么意思_emmmm是什么意思 聊天中emmmm什么意思
- M1 MacBook 苹果电脑安装brew
- Spy vs. Spy
- 解决macos安装升级时报错安装所选更新时发生错误的问题
- bit-wise和vector-wise区别
- HDU 3957 Street Fighter(DLX搜索)
- 威纶通定时循环操作宏_数控铣床编程操作,四个实例助你快速入门