recherche

Maison >développement back-end >tutoriel php >Implémentation PHP js du téléchargement d'images, du recadrage, de la prévisualisation et de la soumission d'exemples

Implémentation PHP js du téléchargement d'images, du recadrage, de la prévisualisation et de la soumission d'exemples

高洛峰
高洛峰original
2017-01-12 14:37:502215parcourir

Le premier langage utilisé est php, et le plugin imgareaselect n'a pas trop de styles fantaisistes. Le code index.php est le suivant : 

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

Plus d'exemples php js de téléchargement, de recadrage, de prévisualisation. , et soumettre des images Pour les articles connexes, veuillez faire attention au site Web PHP chinois !

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Solution au problème de la soumission automatique deux fois du formulaire PHP dans WeChat développée par WeChatArticle suivant：Solution au problème de la soumission automatique deux fois du formulaire PHP dans WeChat développée par WeChat

Articles Liés

Voir plus