我有一个应用程序,我可以在其中上传 1 张图像并对其进行裁剪,然后保存。
我想上传多个文件(输入类型为多个),然后裁剪选定的图像。
所以我现在的工作很完美,但我想上传超过 1 个。
索引.php:
<!DOCTYPE>
<html>
<head>
<title>Het Vergeet-mij-nietje</title>
<link href="style/default.css" REL="stylesheet" TYPE="text/css">
<script type="text/javascript" src="js/showfunctie.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/jquery.Jcrop.min.js"></script>
<link rel="stylesheet" href="css/jquery.Jcrop.css" type="text/css" />
</head>
<body>
<center>
<div id="title">
<h1><a href="index.php" id="link1">Het "Vergeet-mij-nietje"</a></h1>
<h3>Upload Systeem</h3>
</div>
<div id="content1">
<p><b>Upload hier een afbeelding en druk op upload om hem vervolgens te kunnen bijsnijden.</b></p>
<form action="uploaded.php" method="post" enctype="multipart/form-data" onsubmit="return checkCoords();">
<input type="file" name="filename" />
<input type="submit" value="Upload" />
</form>:
<br /> <br />
<p align="left"><b>Bekijk hier de gecropte en geuploadde foto's</b></p>
<p class="album">
<?php include 'album.php';?>
</p>
</div>
<div id="copyright">
Copyright © Kees Sonnema & Jan Beetsma
</div>
</body>
</html>
上传的.php:
<!DOCTYPE>
<html>
<head>
<title>Het Vergeet-mij-nietje</title>
<link rel="stylesheet" href="style/default.css" type="text/css" />
<script src="js/jquery.min.js"></script>
<script src="js/jquery.Jcrop.min.js"></script>
<link rel="stylesheet" href="style/css/jquery.jcrop.css" type="text/css" />
<script language="Javascript">
// dit is de functie voor het croppen
$(function(){
$('#cropbox').Jcrop({
aspectRatio: 0,
onSelect: updateCoords,
bgColor: 'lightblue',
boxWidth: 600,
bgOpacity: .3,
});
});
function updateCoords(c)
{
$('#x').val(c.x);
$('#y').val(c.y);
$('#w').val(c.w);
$('#h').val(c.h);
};
function checkCoords()
{
if (parseInt($('#w').val())) return true;
alert('Select where you want to Crop.');
return false;
};
</script>
</head>
<body>
<center>
<div id="title">
<h1><a href="index.php" id="link1">Het "Vergeet-mij-nietje"</a></h1>
<h3>Upload Systeem</h3>
</div>
<div id="content1">
<?php
session_start();
$target = "data/uploads/";
$target = $target . basename( $_FILES['filename']['name']) ;
$_SESSION['target_path'] = $target;
$ok=1;
if(move_uploaded_file($_FILES['filename']['tmp_name'], $target))
{
echo "De afbeelding *". basename( $_FILES['filename']['name']). "* is geupload naar de map 'uploads'";
}
else {
echo "Sorry, er is een probleem met het uploaden van de afbeelding.";
}
?>
<br /> <br />
<center>
<img id="cropbox" src="<?php echo $target ?>" />
</center>
<form action="crop.php" method="post" enctype="multipart/form-data">
<input type="hidden" id="x" name="x" />
<input type="hidden" id="y" name="y" />
<input type="hidden" id="w" name="w" />
<input type="hidden" id="h" name="h" />
<input type="submit" value="Crop" />
</form>
<br /> <br />
<a href="index.php">Ga terug naar de uploadpagina.</a>
</div>
<div id="copyright">
Copyright © Kees Sonnema
</div>
</body>
</html>
作物.php
<!DOCTYPE>
<html>
<head>
<title>Cropped Image</title>
</head>
<body>
<?php
SESSION_start();
if ($_SERVER['REQUEST_METHOD'] == 'POST')
{
$jpeg_quality = 100;
$src = $_SESSION['target_path'];
$img_r = imagecreatefromjpeg($src);
$dst_r = imagecreatetruecolor($_POST['w'], $_POST['h']);
imagecopy(
$dst_r, $img_r,
0, 0, $_POST['x'], $_POST['y'],
$_POST['w'], $_POST['h']
);
header('Content-type: image/jpeg');
imagejpeg($dst_r, 'data/uploads/' . basename($src));
header('Location:'.$src);
exit;
}
?>
</body>
</html>