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 相关文章推荐
在IIS上安装PHP4.0正式版
Oct 09 PHP
PHP+Tidy-完美的XHTML纠错+过滤
Apr 10 PHP
生成卡号php代码
Apr 09 PHP
PHP 文件扩展名 获取函数
Jun 03 PHP
PHP strncasecmp字符串比较的小技巧
Jan 04 PHP
解析PHP中如何将数组变量写入文件
Jun 06 PHP
教大家制作简单的php日历
Nov 17 PHP
WordPress中使主题支持小工具以及添加插件启用函数
Dec 22 PHP
使用phpexcel类实现excel导入mysql数据库功能(实例代码)
May 12 PHP
教你在header中隐藏php的版本信息
Aug 10 PHP
PHP如何搭建百度Ueditor富文本编辑器
Sep 21 PHP
Linux下源码包安装Swoole及基本使用操作图文详解
Apr 02 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 nl2br函数 将换行字符转成 &amp;lt;br&amp;gt;
2009/08/21 PHP
探讨捕获php错误信息方法的详解
2013/06/09 PHP
推荐几个开源的微信开发项目
2014/12/28 PHP
php读取文件内容的方法汇总
2015/01/24 PHP
ThinkPHP3.2.3数据库设置新特性
2015/03/05 PHP
session 加入redis的实现代码
2016/07/15 PHP
php实现头像上传预览功能
2017/04/27 PHP
input、button的不同type值在ajax提交表单时导致的陷阱
2009/02/24 Javascript
非常好用的JsonToString 方法 简单实例
2013/07/18 Javascript
js返回上一页并刷新的多种实现方法
2014/02/26 Javascript
基于Bootstrap+jQuery.validate实现表单验证
2016/05/30 Javascript
AngularJS ng-template寄宿方式用法分析
2016/11/07 Javascript
移动端使用localResizeIMG4压缩图片
2017/04/22 Javascript
js轮播图透明度切换(带上下页和底部圆点切换)
2017/04/27 Javascript
zTree获取当前节点的下一级子节点数实例
2017/09/05 Javascript
Iview Table组件中各种组件扩展的使用
2018/10/20 Javascript
JavaScript实现学生在线做题计时器功能
2018/12/05 Javascript
layer弹出层倒计时关闭的实现方法
2019/09/27 Javascript
微信小程序跨页面传递data数据方法解析
2019/12/13 Javascript
深入解析Python小白学习【操作列表】
2019/03/23 Python
Python实现FM算法解析
2019/06/18 Python
Django后台admin的使用详解
2019/07/08 Python
PyQt5 界面显示无响应的实现
2020/03/26 Python
Python3.9 beta2版本发布了,看看这7个新的PEP都是什么
2020/06/10 Python
CSS3实现水平居中、垂直居中、水平垂直居中的实例代码
2020/02/27 HTML / CSS
Avène雅漾美国官方网站:敏感肌肤护理专家
2016/10/24 全球购物
写一个用矩形法求定积分的通用函数
2012/11/08 面试题
党员培训思想汇报
2014/01/07 职场文书
求职信模板标准格式范文
2014/02/23 职场文书
计算机科学系职业生涯规划书
2014/03/08 职场文书
创意婚礼策划方案
2014/05/18 职场文书
党的群众路线教育实践活动查摆问题及整改措施
2014/10/10 职场文书
统计员岗位职责
2015/02/11 职场文书
施工现场安全管理制度
2015/08/05 职场文书
安装Ruby和 Rails的详细步骤
2022/04/19 Ruby
Go语言测试库testify使用学习
2022/07/23 Golang