这篇文章主要为大家详细介绍了php+js图片上传、裁剪、预览、提交的简单示例,具有一定的参考价值,可以用来参考一下。
感兴趣的小伙伴,下面一起跟随512笔记的小玲来看看吧!首先用到的语言是php、插件imgareaselect(下载地址),没有太多花哨的样式,index.php代码如下:
代码如下:
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 () {
$('
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);
}
}
);
});
})
图片裁剪、预览/* 512笔记 www.512Pic.com */
//上传图片后,把图片复制到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;
}
?>
if(isset($_SESSION['upfile'])){?>
}?>
< div>
注:关于php+js图片上传、裁剪、预览、提交的简单示例的内容就先介绍到这里,更多相关文章的可以留意512笔记的其他信息。
关键词:
您可能感兴趣的文章