Question

我创建了一种使用两个不同的php页面上传图像的新方法。

1进行上传，而其他进行裁剪。在内部它似乎工作到一定程度，我必须设置它保存到的文件夹的权限，它似乎工作，但知道它不是出于一些奇怪的原因。它假设将裁剪图像的副本保存到同一文件夹，但此刻似乎没有这样做。我不知道它为什么起作用而且已经停止工作了。我已经看了一段时间的代码，但对于我的生活不能看到问题我是相关的新的PHP但它似乎是一个解决方案，能够上传图像和裁剪他们使用IE 8 ，9或其他浏览器。

以下是upload.php部分的代码：

<!DOCTYPE html PUBLIC "-//W3C// XHHTML 1.0 Strict//EN" "http://www.w3.org/TR/XHTML/DTD/xhtml1-strict.dtd" >
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>
</head>
<body >
<?php
    $folder = 'imgtest/';
    $orig_w = 500;

    if(isset($_POST['submit']) )
    {
        $imageFile = $_FILES['image']['tmp_name'];
        $filename = basename( $_FILES['image']['name']);

        list($width, $height) = getimagesize($imageFile);

        $src = imagecreatefromjpeg($imageFile);
        $orig_h = ($height/$width) * $orig_w;

        $tmp = imagecreatetruecolor($orig_w,$orig_h);
        imagecopyresampled($tmp, $src, 0,0,0,0, $orig_w,$orig_h,$width,$height);

        imagejpeg($tmp, $folder.$filename, 100);

        imagedestroy($tmp);
        imagedestroy($src);

        $filename = urlencode($filename);
        header("Location: crop.php?filename=$filename&height=$orig_h");

    }

?>
    <h1>php Upload Form</h1>
  <form action="<?php echo $_SERVER['PHP_SELF'];?>" method="post" enctype="multipart/form-data">
    <p>
     <label for="image">Image:</label>
     <input type="file" name="image" id="image"/><br/>
    </p>
    <p>
    <input type="submit" name="submit" value="Upload Image!"/>
    </p>
  </form>

</body>
<script>

</script>
</html>

以下是裁剪部分的代码：

    <?php

$folder = 'imgtest/';
$filename = $_GET['filename'];
$orig_w = 500;
$orig_h = $_GET['height'];

$targ_w = 120;
$targ_h = 100;

$ratio = $targ_w / $targ_h;

if (isset($_POST['submit']))
{
    $src = imagecreatefromjpeg($folder.$filename);
    $tmp = imagecreatetruecolor($targ_w, $targ_h);
    imagecopyresampled($tmp, $src, 0,0,$_POST['x'],$_POST['y'], $targ_w, $targ_h, $_POST['w'], $_POST['h']);

    imagejpeg($tmp, $folder.'t_'.$filename, 100);

    imagedestroy($tmp);
    imagedestroy($src);

    echo "<h1> Saved Thumbnail</h1> <img src=\"$folder/t_$filename\"/>";
}

＆GT;

<!DOCTYPE html PUBLIC "-//W3C// XHHTML 1.0 Strict//EN" "http://www.w3.org/TR/XHTML/DTD/xhtml1-strict.dtd" >
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>php crop form</title>
        <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>

        <script type="text/javascript" src="js/jquery-1.9.1.min.js" ></script>
        <script type="text/javascript" src="js/jquery.Jcrop.js" ></script>

         <link  rel="stylesheet" href="css/jquery.Jcrop.css"  type="text/css"/>

    <style type="text/css">
         #preview
         {
                width: <?php echo $targ_w?>px;
                height:<?php echo $targ_h?>px;
                overflow:hidden;
         }

    </style>
</head>
<body >
  <h1>Jcrop Plugin Behavior</h1>

  <table>
  <tr>
        <td>
            <img src="<?php echo $folder.$filename?>" id="cropbox" alt="cropbox" />
        </td>
        <td>
                Thumb  Preview:

                <div id="preview">
                    <img src="<?php echo $folder.$filename?>" alt="thumb" />
                </div>
        </td>
    </tr>
  </table>
  <form action="<?php echo $_SERVER['REQUEST_URI']?>" method="post">
  <p>
    <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" id="submit" value="Crop Image!"/>
  </p>

  </form>


</body>

<script type="text/javascript">

        $(function(){
            $('#cropbox').Jcrop({
                aspectRatio: <?php echo $ratio?>,
                setSelect:[0,0,<?php echo $orig_w.','.$orig_h;?>],
                onSelect:updateCoords,
                onChange:updateCoords
            });
        }); 

        function updateCoords(c)
        {
            showPreview(c);
           $("#x").val(c.x);
           $("#y").val(c.y);
           $("#w").val(c.w);
           $("#h").val(c.h);
        }

        function showPreview(coords)
        {
            var rx =<?php echo $targ_w;?> / coords.w
            var ry =<?php echo $targ_h;?> / coords.h

            $("#preview img").css({
                width: Math.round(rx*<?php echo $orig_w;?>)+'px',
                height: Math.round(ry*<?php echo $orig_h;?>)+'px',
                marginLeft: '-' + Math.round (rx*coords.x)+'px',
                marginTop: '-' + Math.round(ry*coords.y)+'px'
            });
        }

</script>
</html>

非常感谢帮助。

Answer 1

标题（在这种情况下是位置php标题）必须在任何内容已经回显之前发送。因此，将您的upload.php中的php部分移到该文件的顶部：

<?php
    $folder = 'imgtest/';
    $orig_w = 500;

    if(isset($_POST['submit']) )
    {
        $imageFile = $_FILES['image']['tmp_name'];
        $filename = basename( $_FILES['image']['name']);

        list($width, $height) = getimagesize($imageFile);

        $src = imagecreatefromjpeg($imageFile);
        $orig_h = ($height/$width) * $orig_w;

        $tmp = imagecreatetruecolor($orig_w,$orig_h);
        imagecopyresampled($tmp, $src, 0,0,0,0, $orig_w,$orig_h,$width,$height);

        imagejpeg($tmp, $folder.$filename, 100);

        imagedestroy($tmp);
        imagedestroy($src);

        $filename = urlencode($filename);
        header("Location: crop.php?filename=$filename&height=$orig_h");

    }

?>

<!DOCTYPE html PUBLIC "-//W3C// XHHTML 1.0 Strict//EN" "http://www.w3.org/TR/XHTML/DTD/xhtml1-strict.dtd" >
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>
</head>
<body >
    <h1>php Upload Form</h1>
  <form action="<?php echo $_SERVER['PHP_SELF'];?>" method="post" enctype="multipart/form-data">
    <p>
     <label for="image">Image:</label>
     <input type="file" name="image" id="image"/><br/>
    </p>
    <p>
    <input type="submit" name="submit" value="Upload Image!"/>
    </p>
  </form>

</body>
<script>

</script>
</html>

告诉它是否仍无效。

使用jcrop裁剪后预览图像不显示

1 个答案: