<!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上传图片预览，放大，裁剪的更多相关文章

  1. 手动实现图片预览-放大缩小全屏支持IE9以上

    #{extends '/Index/index.html' /} #{set title:'意见反馈' /} <script src="/public/mgr/javascripts/ ...

  2. HTML5上传图片预览

    <!DOCTYPE html> <html> <head> <title>HTML5上传图片预览</title> <meta http ...

  3. jquery实现上传图片预览(需要浏览器支持html5)

    jquery实现上传图片预览(需要浏览器支持html5) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&q ...

  4. HTML5上传图片预览功能

    HTML5上传图片预览功能 HTML代码如下: <!-- date: 2018-04-27 14:41:35 author: 王召波 descride: HTML5上传图片预览功能 --> ...

  5. JS 上传图片 + 预览功能（一）

    JS 上传图片 + 预览功能 <body> <input type="file" id="fileimg1" style="disp ...

  6. js兼容火狐显示上传图片预览效果

    js兼容火狐显示上传图片预览效果[谷歌也适用] <!doctype html> <html> <head> <meta content="text/ ...

  7. 通过HTML5 FileReader实现上传图片预览功能

    原文:http://www.htmleaf.com/ziliaoku/qianduanjiaocheng/201706224590.html 在上传图片到服务器之前,我们希望可以预览一下要上传的图片. ...

  8. 去除ckeditor上传图片预览中的英文字母

    去除ckeditor上传图片预览中的英文字母 CKEDITOR.replace('text', { filebrowserImageUploadUrl : 'upload_img.do', langu ...

  9. 浅谈简单实现file控件的图片预览，裁剪和上传。

    1.图片预览之FileReader对象    FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容,使用File或Blob对象指定要读取的文件或数据 ...

  10. HTML5 上传图片预览

    html5出现之前如果需要上传图片预览 一般都是先上传到服务器然后远程预览 html5出现之后   有个filereader 解决了这问题 //选中图片之后 $("#fileAddPic&q ...

随机推荐

  1. java中Arrays的用法

    Arrays是针对数组的工具类,可以进行 排序,查找,复制填充等功能. 大大提高了开发人员的工作效率. 一 数组复制 与使用System.arraycopy进行数组复制类似的, Arrays提供了一个 ...

  2. JavaWeb——tomcat manager 403 Access Denied .You are not authorized to view this page.

    403 Access Denied You are not authorized to view this page. If you have already configured the Manag ...

  3. 某大型跨境电商JVM调优总结

    前提:某大型跨境电商业务发展非常快,线上机器扩容也很频繁,但是对于线上机器的运行情况,特别是jvm内存的情况,一直没有一个统一的标准来给到各个应用服务的owner.经过618大促之后,和运维的同学讨论 ...

  4. nginx+python+windows 开始

    参考文章:http://www.testwo.com/article/311 参考如上文章基本能够完成hello world示例,我来记录下自己操作步骤及不同点,用以备忘,如果能帮助到其他人更好. 以 ...

  5. 第二篇*1、Python基本数据类型

    数据类型: 变量可以处理不同类型的值,基本的类型是数和字符串.使用变量时只需要给它们赋一个值.不需要声明或定义数据类型.Python3 中有六个标准的数据类型:Number(数字),String(字符 ...

  6. IDEA使用SpringBoot 、maven创建微服务的简单过程

    使用IDEA新建一个简单的微服务 1. 打开IDEA,File -> New  -> project 打开如下图1-1所示的对话框 图 1-1 2.点击"Next"按钮 ...

  7. Delphi TXLSReadWriteII2 带的demo中直接编辑XLS文件的例子

    unit Unit1; interface uses Windows, Messages, SysUtils, Classes, Graphics, Controls, Forms, Dialogs, ...

  8. (转).net反编译工具JustDecompile

    开源的反编译工具  JustDecompile https://www.telerik.com/blogs/justdecompile-engine-becomes-open-source https ...

  9. python学习Day2 python 、pycharm安装及环境变量配置

    复习 进制转换:二进制&十六进制转换(从左往右1248机制,每四位二进制对应一位16进制) 二进制&十进制转换   2n-1幂次方相加 十进制到二进制转化  将十进制除以2,把余数记下 ...

  10. 在ASP.NET MVC中使用UEditor无法提交的解决办法

    很简单的一个ajax提交,却怎么都不成功 $.ajax({ type: "POST", url: "/mms/riskmanage/commitreply", ...