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

最新推荐文章于 2024-04-22 14:07:29 发布

Talers69

最新推荐文章于 2024-04-22 14:07:29 发布

阅读量3.2k

点赞数

分类专栏： php 文章标签： php javascript jquery 文件

php 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

首先用到的语言是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 () {

$('< p id = "ferret" >< img src = "upload_pic/resized_pic.jpg" style = "position: relative;" />< p >').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;

}

?>

< p 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"/>

<? }?>

</ p >

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

< p >< img id = "sure" src = "" style = "cursor:hand" /></ p >

</ body >

</ html >

Talers69

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
php+js实现图片的上传、裁剪、预览、提交示例

首先用到的语言是php、插件imgareaselect没有太多花哨的样式，index.php代码如下：123456789101112131415161718192021222324
复制链接

扫一扫