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

时间：2018-12-30分类：PHP作者：编程之家

首先用到的语言是PHP、插件imgareaselect(下载地址)，没有太多花哨的样式，index.PHP 代码如下：
<div class="codetitle"><a style="CURSOR: pointer" data="37395" class="copybut" id="copybut37395" onclick="doCopy('code37395')"> 代码如下:

<div class="codebody" id="code37395">
<!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">

<Meta content="text/html; charset=UTF-8" http-equiv="Content-Type">

<script type="text/javascript" src="scripts/jquery.min.js">
<script type="text/javascript" src="scripts/jquery.imgareaselect.pack.js">
<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">

').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);
}
}
);
});
})

<a href="https://www.jb51.cc/tag/tupian/" target="_blank" class="keywords">图片</a>裁剪、预览

<?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,"
";
}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"/>

<? if(isset($_SESSION['upfile'])){?>
<img id="selectbanner" name="selectbanner" src="<? echo $_SESSION['upfile'];?>" title="mypic"/>
<? }?>

< div>

图片上传图片裁剪