php+js实现图片的上传、裁剪、预览、提交示例

jopen 4年前

    <!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'        });        }        //unity3d脚本http://www.unitymanual.com        //这里通过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>