php+js实现图片的上传、裁剪、预览、提交示例


Posted in PHP onAugust 27, 2013

首先用到的语言是php、插件imgareaselect(下载地址),没有太多花哨的样式,index.php代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type"> 
<link rel="stylesheet" type="text/css" href="css/imgareaselect-default.css" /> 
<script type="text/javascript" src="scripts/jquery.min.js"></script> 
<script type="text/javascript" src="scripts/jquery.imgareaselect.pack.js"></script> 
<script type="text/javascript"> 
function preview(img, selection) { 
$('#selectbanner').data('x',selection.x1); 
$('#selectbanner').data('y',selection.y1); 
$('#selectbanner').data('w',selection.width); 
$('#selectbanner').data('h',selection.height); var scaleX = 100 / (selection.width || 1); 
var scaleY = 100 / (selection.height || 1); 
$('#ferret > img').css({ 
width: Math.round(scaleX * 512) + 'px',//512、390是你上传图片的宽高 
height: Math.round(scaleY * 390) + 'px', 
marginLeft: '-' + Math.round(scaleX * selection.x1) + 'px', 
marginTop: '-' + Math.round(scaleY * selection.y1) + 'px' 
}); 
} 
//这里通过jQuery语法在原来图片后插入预览的小图片 
$(document).ready(function () { 
$('<div id="ferret"><img src="upload_pic/resized_pic.jpg" style="position: relative;" /><div>').css({ 
float: 'left', 
position: 'relative', 
overflow: 'hidden', 
width: '100px', 
height: '100px' 
}) 
.insertAfter($('#selectbanner')); 
$('#selectbanner').imgAreaSelect({ 
selectionColor: 'blue', x1:0, y1:0, x2: 100,//初始位置 
maxWidth:500,y2:100, 
aspectRatio: '1:1',//缩放比例 
selectionOpacity: 0.2 , 
onSelectEnd: preview //裁剪后执行的函数,在上面 
}); 
//确认裁剪 
$("#sliceButton").click(function() { 
var pic = $('#selectbanner').attr('src'); 
// alert(pic); 
var x,y,w,h; 
$.post( 
"cat.php", //(2)将附上这个页面的代码 
{ 
x:$('#selectbanner').data('x'), 
y:$('#selectbanner').data('y'), 
w:$('#selectbanner').data('w'), 
h:$('#selectbanner').data('h'), 
pic:pic 
}, 
function(data){ 
// alert(data); 
//把裁剪后图片加载到#sure 
if(data){ 
$('#sure').attr('src',data); 
} 
} 
); 
}); 
}) 
</script> 
<title>图片裁剪、预览</title> 
</head> 
<body> 
<?php 
//上传图片后,把图片复制到upload文件夹下面 
if($_POST){ 
$photo = $_FILES['img']['name']; 
$tmp_addr = $_FILES['img']['tmp_name']; 
$path = 'upload/'; 
$type=array("jpg","gif","jpeg","png"); 
$tool = substr(strrchr($photo,'.'),1); 
if(!in_array(strtolower($tool),$type)){ 
$text=implode('.',$type); 
echo "您只能上传以下类型文件: ",$text,"<br>"; 
}else{ 
$filename = explode(".",$photo); //把上传的文件名以"."好为准做一个数组。 
$time = date("m-d-H-i-s"); //取当前上传的时间 
$filename[0] = $time; //取文件名 
$name = implode(".",$filename); //上传后的文件名 
$uploadfile = $path.$name; 
$_SESSION['upfile'] = $uploadfile;//上传后的文件名地址 
move_uploaded_file($tmp_addr,$uploadfile); 
} 
// echo $uploadfile; 
} 
?> 
<div id="s"> 
<!--上传图片--> 
<form action="" method="post" enctype="multipart/form-data"> 
<input type="file" id="img" name="img" value="" onclick=""/> 
<input name="submit" id="submit" type="submit" value="提交" class="submit"/> 
</form> 
<!--显示图片--> 
<? if(isset($_SESSION['upfile'])){?> 
<img id="selectbanner" name="selectbanner" src="<? echo $_SESSION['upfile'];?>" title="mypic"/> 
<? }?> 
</div> 
<!--确认裁剪--> 
<div><input type="submit" id="sliceButton" name="sliceButton" value="sliceButton"></div> 
<!--显示裁剪后的图片--> 
< div><img id="sure" src="" style="cursor:hand" /></div> 
</body> 
</html>
PHP 相关文章推荐
十天学会php之第九天
Oct 09 PHP
增加反向链接的101个方法 站长推荐
Jan 31 PHP
PHP禁止个别IP访问网站
Oct 30 PHP
php switch语句多个值匹配同一代码块应用示例
Jul 29 PHP
php实现检查文章是否被百度收录
Jan 27 PHP
PHP实现获取中英文首字母
Jun 19 PHP
PHP实现数组array转换成xml的方法
Jul 19 PHP
Laravel5权限管理方法详解
Jul 26 PHP
PHP给源代码加密的几种方法汇总(推荐)
Feb 06 PHP
PHP之多条件混合筛选功能的实现方法
Oct 09 PHP
PHP 构造函数和析构函数原理与用法分析
Apr 21 PHP
php的对象传值与引用传值代码实例讲解
Feb 26 PHP
phpmyadmin config.inc.php配置示例
Aug 27 #PHP
PHP自动生成后台导航网址的最佳方法
Aug 27 #PHP
PHP连接局域网MYSQL数据库的简单实例
Aug 26 #PHP
php读取excel文件的简单实例
Aug 26 #PHP
PHP中判断变量为空的几种方法分享
Aug 26 #PHP
PHP 如何利用phpexcel导入数据库
Aug 24 #PHP
php实现利用phpexcel导出数据
Aug 24 #PHP
You might like
PHP 5.3.0 安装分析心得
2009/08/07 PHP
JavaScript修改css样式style
2008/04/15 Javascript
js null,undefined,字符串小结
2010/08/21 Javascript
js实现简单的星级选择器提交效果适用于评论等
2013/10/18 Javascript
无阻塞加载js,防止因js加载不了影响页面显示的问题
2016/12/18 Javascript
Vue学习笔记之表单输入控件绑定
2017/09/05 Javascript
vue项目中axios使用详解
2018/02/07 Javascript
Vue使用.sync 实现父子组件的双向绑定数据问题
2019/04/04 Javascript
Vue+iview+webpack ie浏览器兼容简单处理
2019/09/20 Javascript
JavaScript React如何修改默认端口号方法详解
2020/07/28 Javascript
Vue 简单实现前端权限控制的示例
2020/12/25 Vue.js
[00:02]DOTA2新版本使用PA至宝后暴击展示
2014/11/19 DOTA
Python的Django框架中设置日期和字段可选的方法
2015/07/17 Python
Python中pygame安装方法图文详解
2015/11/11 Python
python脚本监控docker容器
2016/04/27 Python
Python3获取电脑IP、主机名、Mac地址的方法示例
2019/04/11 Python
Python统计一个字符串中每个字符出现了多少次的方法【字符串转换为列表再统计】
2019/05/05 Python
Python3.6+selenium2.53.6自动化测试_读取excel文件的方法
2019/09/06 Python
在pytorch中对非叶节点的变量计算梯度实例
2020/01/10 Python
Python操作Elasticsearch处理timeout超时
2020/07/17 Python
Django用户认证系统如何实现自定义
2020/11/12 Python
python 多线程爬取壁纸网站的示例
2021/02/20 Python
html5 canvas 画图教程案例分析
2012/11/23 HTML / CSS
亚马逊海外购:亚马逊美国、英国、日本、德国直邮
2021/03/18 全球购物
如何启动时不需输入用户名与密码
2014/05/09 面试题
机械化及自动化毕业生的自我评价分享
2013/11/06 职场文书
活动总结怎么写啊
2014/05/07 职场文书
银行奉献演讲稿
2014/09/16 职场文书
六一儿童节标语
2014/10/08 职场文书
骨干教师考核评语
2014/12/31 职场文书
医生个人年终总结
2015/02/28 职场文书
2015年保卫科工作总结
2015/05/14 职场文书
同学聚会祝酒词
2015/08/10 职场文书
运动会广播稿200字
2015/08/19 职场文书
教你怎么用Python监控愉客行车程
2021/04/29 Python
Java使用JMeter进行高并发测试
2021/11/23 Java/Android