php+js实现图片的上传、裁剪、预览、提交整个功能

最新推荐文章于 2024-11-01 13:25:43 发布

原创最新推荐文章于 2024-11-01 13:25:43 发布 · 3.8k 阅读

1 ·

CC 4.0 BY-SA版权

PHP 专栏收录该内容

120 篇文章

订阅专栏

本文详细讲解如何使用PHP和JavaScript配合，实现图片的上传、客户端预览、裁剪操作，并最终提交处理。通过实例代码，深入理解前后端交互过程，打造完善的图片管理功能。

首先用到的语言是php、插件imgareaselect(下载地址：http://odyniec.net/projects/imgareaselect/)，没有太多花哨的样式，index.php代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
  <link rel="stylesheet" type="text/css" href="css/imgareaselect-default.css" />
  <script type="text/javascript" src="scripts/jquery.min.js"></script>
  <script type="text/javascript" src="scripts/jquery.imgareaselect.pack.js"></script>
<script type="text/javascript">
    function preview(img, selection) {
         $('#selectbanner').data('x',selection.x1);
         $('#selectbanner').data('y',selection.y1);
         $('#selectbanner').data('w',selection.width);
         $('#selectbanner').data('h',selection.height);

            var scaleX = 100 / (selection.width || 1);
            var scaleY = 100 / (selection.height || 1);
            $('#ferret  > img').css({
            width: Math.round(scaleX * 512) + 'px',//512、390是你上传图片的宽高
            height: Math.round(scaleY * 390) + 'px',
            marginLeft: '-' + Math.round(scaleX * selection.x1) + 'px',
            marginTop: '-' + Math.round(scaleY * selection.y1) + 'px'
            });
        }

//这里通过jQuery语法在原来图片后插入预览的小图片
$(document).ready(function () {
$('<div id="ferret"><img src="upload_pic/resized_pic.jpg" style="position: relative;" /><div>').css({
    float: 'left',
    position: 'relative',
    overflow: 'hidden',
    width: '100px',
    height: '100px'
    })

.insertAfter($('#selectbanner'));

$('#selectbanner').imgAreaSelect({
            selectionColor: 'blue', x1:0, y1:0, x2: 100,//初始位置
            maxWidth:500,y2:100,
            aspectRatio: '1:1',//缩放比例
            selectionOpacity: 0.2 ,
            onSelectEnd: preview //裁剪后执行的函数，在上面
});
  //确认裁剪
$("#sliceButton").click(function() {
             var pic = $('#selectbanner').attr('src');
            // alert(pic);
             var x,y,w,h;
             $.post(
              "cat.php", //（2）将附上这个页面的代码
              {
               x:$('#selectbanner').data('x'),
               y:$('#selectbanner').data('y'),
               w:$('#selectbanner').data('w'),
               h:$('#selectbanner').data('h'),
               pic:pic
              },
              function(data){
                //  alert(data);
               //把裁剪后图片加载到#sure
               if(data){
                $('#sure').attr('src',data);
               }
              }
             );
        });
})
</script>
<title>图片裁剪、预览</title>
</head>
<body>
<?php
//上传图片后，把图片复制到upload文件夹下面
if($_POST){
      $photo = $_FILES['img']['name'];
      $tmp_addr = $_FILES['img']['tmp_name'];

         $path = 'upload/';
        $type=array("jpg","gif","jpeg","png");
        $tool = substr(strrchr($photo,'.'),1);
        if(!in_array(strtolower($tool),$type)){
            $text=implode('.',$type);
            echo "您只能上传以下类型文件: ",$text,"<br>";
            }else{
                $filename = explode(".",$photo);                       //把上传的文件名以"."好为准做一个数组。
                $time = date("m-d-H-i-s");                            //取当前上传的时间
                $filename[0] = $time;                                //取文件名
                $name = implode(".",$filename);                     //上传后的文件名
                $uploadfile = $path.$name;
                $_SESSION['upfile'] = $uploadfile;//上传后的文件名地址
                move_uploaded_file($tmp_addr,$uploadfile);
                }
    //    echo  $uploadfile;
}
?>
<div id="s">

    <form action="" method="post" enctype="multipart/form-data">
    <input type="file" id="img" name="img" value="" onclick=""/>
    <input name="submit" id="submit" type="submit" value="提交" class="submit"/>
    </form>

<? if(isset($_SESSION['upfile'])){?>
    <img id="selectbanner" name="selectbanner"  src="<? echo $_SESSION['upfile'];?>" title="mypic"/>
<? }?>
</div>

    <div><input type="submit" id="sliceButton" name="sliceButton" value="sliceButton"></div>

<    div><img  id="sure" src="" style="cursor:hand" /></div>
</body>
</html>