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
flash用php连接数据库的代码
Apr 21 PHP
基于PHP一些十分严重的缺陷详解
Jun 03 PHP
PHP中的按位与和按位或操作示例
Jan 27 PHP
PHP中__FILE__、dirname与basename用法实例分析
Dec 01 PHP
PHP实现的oracle分页函数实例
Jan 25 PHP
Zend Framework教程之模型Model基本规则和使用方法
Mar 04 PHP
利用PHP生成静态html页面的原理
Sep 30 PHP
php模仿qq空间或朋友圈发布动态、评论动态、回复评论、删除动态或评论的功能(中)
Jun 11 PHP
php实现的统计字数函数定义与使用示例
Jul 26 PHP
PHP实现的多进程控制demo示例
Jul 22 PHP
Yii框架 session 数据库存储操作方法示例
Nov 18 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的图形函数中显示汉字
2006/10/09 PHP
谨慎使用PHP的引用原因分析
2012/09/06 PHP
PHP使用PDO操作数据库的乱码问题解决方法
2016/04/08 PHP
PHP中抽象类和抽象方法概念与用法分析
2016/05/24 PHP
PHP 数组基本操作方法详解
2016/06/17 PHP
PHP通过文件路径获取文件名的实例代码
2018/10/14 PHP
拖动布局之保存布局页面cookies篇
2010/10/29 Javascript
JS左右无缝滚动(一般方法+面向对象方法)
2012/08/17 Javascript
javascript获取作用在元素上面的样式属性代码
2012/09/20 Javascript
JS图片自动轮换效果实现思路附截图
2014/04/30 Javascript
jQuery插件开发汇总
2016/05/15 Javascript
JavaScript实现复制文章自动添加版权
2016/08/02 Javascript
概述VUE2.0不可忽视的很多变化
2016/09/25 Javascript
vue2.0+webpack环境的构造过程
2016/11/08 Javascript
Angular2 之 路由与导航详细介绍
2017/05/26 Javascript
详解vue-cli中的ESlint配置文件eslintrc.js
2017/09/25 Javascript
微信小程序自定义弹窗滚动与页面滚动冲突的解决方法
2019/07/16 Javascript
Vue使用CDN引用项目组件,减少项目体积的步骤
2020/10/30 Javascript
npm全局环境变量配置详解
2020/12/15 Javascript
[02:25]DOTA2英雄基础教程 熊战士
2014/01/03 DOTA
Python 获取中文字拼音首个字母的方法
2018/11/28 Python
用xpath获取指定标签下的所有text的实例
2019/01/02 Python
opencv3/python 鼠标响应操作详解
2019/12/11 Python
在spyder IPython console中,运行代码加入参数的实例
2020/04/20 Python
Html5游戏开发之乒乓Ping Pong游戏示例(二)
2013/01/21 HTML / CSS
澳大利亚在线高跟鞋商店:Shoe Me
2019/11/19 全球购物
Linux内核产生并发的原因
2012/07/13 面试题
环境科学专业个人求职信
2013/09/26 职场文书
函授本科毕业自我鉴定
2013/10/09 职场文书
银行求职推荐信范文
2013/11/30 职场文书
股东合作协议书范本
2014/04/14 职场文书
《每逢佳节倍思亲》教后反思
2014/04/19 职场文书
志愿者活动总结报告
2014/06/27 职场文书
毕业生个人自荐书
2015/03/05 职场文书
学生会生活部工作总结2015
2015/03/31 职场文书
信仰纪录片观后感
2015/06/08 职场文书