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(1)
Oct 09 PHP
PHP 利用Mail_MimeDecode类提取邮件信息示例
Jan 26 PHP
PHP zip扩展Linux下安装过程分享
May 05 PHP
PHP中定义数组常量(array常量)的方法
Nov 17 PHP
php利用cookie实现自动登录的方法
Dec 10 PHP
php调用KyotoTycoon简单实例
Apr 02 PHP
php cli配置文件问题分析
Oct 15 PHP
PHP和C#可共用的可逆加密算法详解
Oct 26 PHP
PHP安装GeoIP扩展根据IP获取地理位置及计算距离的方法
Jul 01 PHP
PHP学习记录之数组函数
Jun 01 PHP
PHP中str_split()函数的用法讲解
Apr 11 PHP
Laravel Eloquent ORM 实现查询表中指定的字段
Oct 17 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递归json类实例
2014/12/02 PHP
PHP实现事件机制实例分析
2015/06/26 PHP
php while循环控制的简单实例
2016/05/30 PHP
PHP连接MYSQL数据库的3种常用方法
2017/02/27 PHP
jQuery对象和DOM对象的相互转化实现代码
2010/03/02 Javascript
跨浏览器的 mouseenter mouseleave 以及 compareDocumentPosition的使用说明
2010/05/04 Javascript
关于js new Date() 出现NaN 的分析
2012/10/23 Javascript
Flex通过JS获取客户端IP和计算机名的实例代码
2013/11/21 Javascript
将list转换为json失败的原因
2013/12/17 Javascript
jquery判断浏览器后退时候弹出消息的方法
2014/08/11 Javascript
AngularJS入门知识之MVW类框架的编程思想探讨
2014/12/08 Javascript
Google 地图控件集详解及实例代码
2016/08/06 Javascript
H5用户注册表单页 注册模态框!
2016/09/17 Javascript
Mongoose实现虚拟字段查询的方法详解
2017/08/15 Javascript
详解React Native开源时间日期选择器组件(react-native-datetime)
2017/09/13 Javascript
使用原生js封装的ajax实例(兼容jsonp)
2017/10/12 Javascript
Vuex实现计数器以及列表展示效果
2018/03/10 Javascript
Vue中使用方法、计算属性或观察者的方法实例详解
2018/10/31 Javascript
Vue2.x Todo之自定义指令实现自动聚焦的方法
2019/01/08 Javascript
详解几十行代码实现一个vue的状态管理
2019/01/28 Javascript
微信小程序云开发 生成带参小程序码流程
2019/05/18 Javascript
Nautil 中使用双向数据绑定的实现
2019/10/02 Javascript
JavaScript函数Call、Apply原理实例解析
2020/02/17 Javascript
Openlayers实现地图的基本操作
2020/09/28 Javascript
Empty test suite.(PyCharm程序运行错误的解决方法)
2018/11/30 Python
计算机二级python学习教程(1) 教大家如何学习python
2019/05/16 Python
pytorch 准备、训练和测试自己的图片数据的方法
2020/01/10 Python
pyCharm 设置调试输出窗口中文显示方式(字符码转换)
2020/06/09 Python
.NET面试10题
2014/02/24 面试题
Shell如何接收变量输入
2012/09/24 面试题
高级技校毕业生自荐信
2013/11/18 职场文书
亲子活动总结
2014/04/26 职场文书
计算机专业毕业生自荐书
2014/06/02 职场文书
重阳节演讲稿:尊敬帮助老人 弘扬传统美德
2014/09/25 职场文书
教导主任个人总结
2015/03/03 职场文书
2015年建党94周年演讲稿
2015/03/19 职场文书