溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了php+js如何實現圖片的上傳、裁剪、預覽、提交示例，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
php，一個嵌套的縮寫名稱，是英文超級文本預處理語言（PHP:Hypertext Preprocessor）的縮寫。PHP 是一種 HTML 內嵌式的語言，PHP與微軟的ASP頗有幾分相似，都是一種在服務器端執行的嵌入HTML文檔的腳本語言，語言的風格有類似于C語言，現在被很多的網站編程人員廣泛的運用。
首先用到的語言是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 () {
$('<div id="ferret"><img src="upload_pic/resized_pic.jpg" /><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="" /></div>
</body>
</html>感謝你能夠認真閱讀完這篇文章，希望小編分享的“php+js如何實現圖片的上傳、裁剪、預覽、提交示例”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
