php+js实现图片的上传、裁剪、预览、提交示例
程序员文章站
2023-11-14 20:47:40
首先用到的语言是php、插件imgareaselect()，没有太多花哨的样式，index.php代码如下： 复制代码 代码如下:
首先用到的语言是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>
复制代码 代码如下:
<!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>