Question

我有一个应用程序，我可以上传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 &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>

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>

Answer 1

如何使用此库： http://trentrichardson.com/2012/12/11/uberuploadcropper-update-upload-and-crop-multiple-files/

一种上传多个文件并使用JCrop裁剪它们的方法？

1 个答案: