上傳多個文件並使用JCrop裁剪的方法？

我有一個應用程序，我可以上傳1張圖片並剪裁，然後保存。上傳多個文件並使用JCrop裁剪的方法？

我想上傳多個文件（輸入類型爲multiple），然後裁剪選定的圖像。

那麼，我現在已經是完美的工作，但我要上傳超過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 &copy; Kees Sonnema & Jan Beetsma 
</div> 

</body> 
</html>

uploaded.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 &copy; 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>

來源

2012-12-15 Kees Sonnema

jcrop似乎僅限於一次處理一個圖像。讓用戶上傳他們的所有圖像，然後將它們呈現給用戶一次裁剪？ – Charles

哦，我不知道JCrop一次只限於一張圖片。但首先我想上傳說'4'圖像。而且我想一次裁剪一個。 –

還有其他知道解決方法的人或其他人？ –