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

前端之家收集整理的这篇文章主要介绍了php+js实现图片的上传、裁剪、预览、提交示例前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

首先用到的语言是PHP插件imgareaselect(下载地址),没有太多花哨的样式,index.PHP代码如下:
<div class="codetitle"><a style="CURSOR: pointer" data="37395" class="copybut" id="copybut37395" onclick="doCopy('code37395')"> 代码如下:

<div class="codebody" id="code37395">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;

<Meta content="text/html; charset=UTF-8" http-equiv="Content-Type">

<script type="text/javascript" src="scripts/jquery.min.js">
<script type="text/javascript" src="scripts/jquery.imgareaselect.pack.js">
<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">
').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);
}
}
);
});
})

<a href="https://www.jb51.cc/tag/tupian/" target="_blank" class="keywords">图片</a>裁剪、预览
@H_502_74@

<?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,"
";
}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"/>


<? if(isset($_SESSION['upfile'])){?>
<img id="selectbanner" name="selectbanner" src="<? echo $_SESSION['upfile'];?>" title="mypic"/>
<? }?>


<input type="submit" id="sliceButton" name="sliceButton" value="sliceButton">


< div>



原文链接:https://www.f2er.com/php/25685.html

猜你在找的PHP相关文章