一种上传多个文件并使用 JCrop 裁剪它们的方法？
Posted
技术标签:
【中文标题】一种上传多个文件并使用 JCrop 裁剪它们的方法？【英文标题】：a way to upload multiple files and crop them with JCrop? 【发布时间】：2012-12-15 17:10:12 【问题描述】：我有一个应用程序，我可以在其中上传 1 张图像并对其进行裁剪，然后保存。
我想上传多个文件（输入类型为多个），然后裁剪选定的图像。
所以我现在的工作很完美，但我想上传超过 1 个。
index.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>
crop.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>
【问题讨论】：
jcrop 似乎仅限于一次处理一张图像。用户是否上传了所有图片，然后一次将一张图片呈现给用户进行裁剪？ 哦，我不知道 JCrop 一次只能使用一张图片。但首先我想上传说“4”张图片。而且我想一次裁剪一个。 还有其他知道方法的人吗？ 【参考方案1】：如何使用这个库： http://trentrichardson.com/2012/12/11/uberuploadcropper-update-upload-and-crop-multiple-files/
【讨论】：
以上是关于一种上传多个文件并使用 JCrop 裁剪它们的方法？的主要内容，如果未能解决你的问题，请参考以下文章
jcrop 在上传之前是不是通过将 xy 发送到 php 进行裁剪来工作？