Home > Article > Backend Development > PHP+js implements image uploading, cropping, previewing and submitting examples

PHP+js implements image uploading, cropping, previewing and submitting examples

高洛峰Original: 2017-01-12 14:37:502166browse

The first language used is php, and the plugin imgareaselect does not have too many fancy styles. The index.php code is as follows:

<!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) { 
$(&#39;#selectbanner&#39;).data(&#39;x&#39;,selection.x1); 
$(&#39;#selectbanner&#39;).data(&#39;y&#39;,selection.y1); 
$(&#39;#selectbanner&#39;).data(&#39;w&#39;,selection.width); 
$(&#39;#selectbanner&#39;).data(&#39;h&#39;,selection.height); 

var scaleX = 100 / (selection.width || 1); 
var scaleY = 100 / (selection.height || 1); 
$(&#39;#ferret > img&#39;).css({ 
width: Math.round(scaleX * 512) + &#39;px&#39;,//512、390是你上传图片的宽高 
height: Math.round(scaleY * 390) + &#39;px&#39;, 
marginLeft: &#39;-&#39; + Math.round(scaleX * selection.x1) + &#39;px&#39;, 
marginTop: &#39;-&#39; + Math.round(scaleY * selection.y1) + &#39;px&#39; 
}); 
} 

//这里通过jQuery语法在原来图片后插入预览的小图片 
$(document).ready(function () { 
$(&#39;<div id="ferret"><img src="upload_pic/resized_pic.jpg" style="position: relative;" /><div>&#39;).css({ 
float: &#39;left&#39;, 
position: &#39;relative&#39;, 
overflow: &#39;hidden&#39;, 
width: &#39;100px&#39;, 
height: &#39;100px&#39; 
}) 

.insertAfter($(&#39;#selectbanner&#39;)); 

$(&#39;#selectbanner&#39;).imgAreaSelect({ 
selectionColor: &#39;blue&#39;, x1:0, y1:0, x2: 100,//初始位置 
maxWidth:500,y2:100, 
aspectRatio: &#39;1:1&#39;,//缩放比例 
selectionOpacity: 0.2 , 
onSelectEnd: preview //裁剪后执行的函数，在上面 
}); 
//确认裁剪 
$("#sliceButton").click(function() { 
var pic = $(&#39;#selectbanner&#39;).attr(&#39;src&#39;); 
// alert(pic); 
var x,y,w,h; 
$.post( 
"cat.php", //（2）将附上这个页面的代码 
{ 
x:$(&#39;#selectbanner&#39;).data(&#39;x&#39;), 
y:$(&#39;#selectbanner&#39;).data(&#39;y&#39;), 
w:$(&#39;#selectbanner&#39;).data(&#39;w&#39;), 
h:$(&#39;#selectbanner&#39;).data(&#39;h&#39;), 
pic:pic 
}, 
function(data){ 
// alert(data); 
//把裁剪后图片加载到#sure 
if(data){ 
$(&#39;#sure&#39;).attr(&#39;src&#39;,data); 
} 
} 
); 
}); 
}) 
</script> 
<title>图片裁剪、预览</title> 
</head> 
<body> 
<?php 
//上传图片后，把图片复制到upload文件夹下面 
if($_POST){ 
$photo = $_FILES[&#39;img&#39;][&#39;name&#39;]; 
$tmp_addr = $_FILES[&#39;img&#39;][&#39;tmp_name&#39;]; 

$path = &#39;upload/&#39;; 
$type=array("jpg","gif","jpeg","png"); 
$tool = substr(strrchr($photo,&#39;.&#39;),1); 
if(!in_array(strtolower($tool),$type)){ 
$text=implode(&#39;.&#39;,$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[&#39;upfile&#39;] = $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[&#39;upfile&#39;])){?> 
<img id="selectbanner" name="selectbanner" src="<? echo $_SESSION[&#39;upfile&#39;];?>" 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>

More php+js implementation of image uploading, cropping, previewing, and submission examples are related Please pay attention to the PHP Chinese website for articles!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：WeChat development PHP form WeChat automatic submission twice problem solutionNext article：WeChat development PHP form WeChat automatic submission twice problem solution

See more

PHP+js implements image uploading, cropping, previewing and submitting examples

Related articles