php+js實現圖片的上傳、裁剪、預覽、提交示例

jopen 10年前發布 | 67K 次閱讀 圖片 PHP開發 

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ";

    <html xmlns=";

    <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'  
});  
}  
//unity3d腳本http://www.unitymanual.com  
//這里通過jQuery語法在原來圖片后插入預覽的小圖片  
$(document).ready(function () {  
$('<div id="ferret"><img src="upload_pic/resized_pic.jpg" style="position: relative;" /><div>').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;  
}  
?>  
<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['upfile'])){?>  
<img id="selectbanner" name="selectbanner" src="<? echo $_SESSION['upfile'];?>" 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>   </pre><br />
 本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！