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

 

首先用到的语言是php、插件imgareaselect(下载地址:http://odyniec.net/projects/imgareaselect/),没有太多花哨的样式,index.php代码如下:
<!DOCTYPE html PUB LIC "-//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=UT F-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>




你可能感兴趣的:(php+js实现图片的上传、裁剪、预览、提交整个功能)