suchen

Heim >Backend-Entwicklung >PHP-Tutorial >PHP+js implementiert das Hochladen, Zuschneiden, Anzeigen einer Vorschau und Senden von Beispielen für Bilder

PHP+js implementiert das Hochladen, Zuschneiden, Anzeigen einer Vorschau und Senden von Beispielen für Bilder

高洛峰
高洛峰Original
2017-01-12 14:37:502194Durchsuche

Die erste verwendete Sprache ist PHP. Das Plugin imgareaselect hat nicht allzu viele ausgefallene Stile. Der index.php-Code lautet wie folgt: 

<!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>

Mehr PHP+JS realisiert das Hochladen, Zuschneiden und Anzeigen Beispiele für verwandte Artikel finden Sie auf der PHP-Chinese-Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Von WeChat entwickelte Lösung für das Problem der automatischen doppelten Übermittlung des PHP-Formulars in WeChatNächster Artikel：Von WeChat entwickelte Lösung für das Problem der automatischen doppelten Übermittlung des PHP-Formulars in WeChat

In Verbindung stehende Artikel

Mehr sehen