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

前端技术 2023/08/08 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>

本文地址：https://www.stayed.cn/item/583

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案