fileuploadJs+JcropJs+php综合小应用实现图片拖拽上传与裁剪功能的demo

浏览数：39 / 时间：2015年06月09日

fileupload.Js+Jcrop.Js+php综合小应用实现图片拖拽上传与裁剪功能.

麻雀虽小,五脏俱全.包含普通上传,拖拽上传,进度条,图片裁剪等实用功能的整合.

由于不是正宗的前端和时间关系,所以样式就没怎么弄.只能靠各位大神去调整了.

水平有限,有什么错漏之处欢迎大家指正.

废话少说,直接来代码:

目录结构:

需要的jq库

我想Google baidu一下这些jq插件都会有的

index.php:

<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/jquery.ui.widget.js"></script>
<script type="text/javascript" src="js/jquery.iframe-transport.js"></script>
<script type="text/javascript" src="js/jquery.fileupload.js"></script>
<script type="text/javascript" src="js/jquery.Jcrop.js"></script>
<script type="text/javascript" src="js/demo.js"></script>

<style type="text/css">
.bar {
    height: 18px;
    background: green;
}
/* Fixes issue here http://code.google.com/p/jcrop/issues/detail?id=1 */
.jcrop-holder{text-align:left;}
.jcrop-vline,
.jcrop-hline{position:absolute;background:#fff url("Jcrop.gif") repeat top left;font-size:0;}
.jcrop-vline{height:100%;width:1px !important;}
.jcrop-hline{width:100%;height:1px !important;}
.jcrop-vline.right{right:0px;}
.jcrop-hline.bottom{bottom:0px;}
.jcrop-handle{width:7px !important;height:7px !important;border:1px solid #eee;background-color:#333;font-size:1px;}

.jcrop-tracker{width:100%;height:100%;}

.custom .jcrop-vline,
.custom .jcrop-hline{background:#ff0;}
.custom .jcrop-handle{border-color:black;background-color:#c7bb00;border-radius:3px;}

</style>

</head>
<body>
<input id="fileupload" type="file" name="files[]" data-url="uploadAction.php" multiple>
<div class="imagezone" style="width:500px;height:400px;border:1px solid red;float:left;">拖入图片
    <div style="width:100px;height:50px;overflow:hidden;">
        <img alt="" src="" id="imgCrop">
    </div>
</div>
<div style=‘float:left;‘><img src="" class=‘imagepreview‘/><button class=‘cropsubmit‘ style=‘display: none;‘>提交</button></div>
<div id="progress" style=‘clear:both;‘>
    <div class="bar" style="width: 0%;"></div>
</div>
<div><img class="resCrop" src="" style="width:100px;height:50px;"></div>
</body>
</html>

demo.js:

$(function () {
    $(‘#fileupload‘).fileupload({
        sequentialUploads:true,
        autoUpload:true,
        dataType: ‘json‘,
        acceptFileTypes:/^image\/(gif|jpeg|png)$/,
        url:‘uploadAction.php‘,
        formData:{},
        dropZone:$(‘.imagezone‘),
        done: function (e, data) {
            $(‘.imagepreview‘).attr(‘src‘,‘uploads/‘+data.result.imgname);
            $(‘.cropsubmit‘).show().on(‘click‘, cropsubmit);
            $(‘#imgCrop‘).attr(‘src‘,‘uploads/‘+data.result.imgname);
		    $(‘.imagepreview‘).Jcrop({
                aspectRatio:2,
                minSelect:[30,15],
                bgOpacity:0.7,
                onChange:updatePreview,
                onSelect:updatePreview,
            },function(){
            		// Use the API to get the real image size
            		var bounds=this.getBounds();
            		boundx=bounds[0];
            		boundy=bounds[1];
//             		console.log(bounds);
            		// Store the API in the jcrop_api variable
            		jcrop_api=this;
            	});
		    function cropsubmit(){
			    var s = jcrop_api.tellSelect(),
			        url = ‘uploads/‘+data.result.imgname,
			        imgname = data.result.imgname;
				$.post(‘cropAction.php‘, {‘xy‘:s,‘url‘:url,‘imgname‘:imgname}, function(json){
					$(‘.resCrop‘).attr(‘src‘, json.cropurl);
					$(‘.imagepreview‘).parent().remove();
				}, ‘json‘);
			};
			function updatePreview(c){
				if(parseInt(c.w)>0){
					var rx=100/c.w;
					var ry=50/c.h;
					
					$("#imgCrop").css({
						width:Math.round(rx*boundx)+"px",
						height:Math.round(ry*boundy)+"px",
						marginLeft:"-"+Math.round(rx*c.x)+"px",
						marginTop:"-"+Math.round(ry*c.y)+"px"
					});
				};
			};
				        	
        },
	    progressall: function (e, data) {
            	var progress = parseInt(data.loaded / data.total * 100, 10);
           	$(‘#progress .bar‘).css(‘width‘,progress + ‘%‘);
        	}
    });
});

原图处理Action uploadAction.php:

<?php

if ($_FILES[‘files‘][‘error‘][0] == 0) {
	$filename = explode(‘.‘, $_FILES[‘files‘][‘name‘][0]);
	$dist = ‘uploads/‘ . time() . ‘.‘ . $filename[1];

	if(move_uploaded_file($_FILES[‘files‘][‘tmp_name‘][0], $dist)){
		$imgname = substr(strrchr($dist,‘/‘),1);
		$result = array(‘imgname‘ => $imgname);
		header ( "Content-Type:text/html; charset=utf-8" );
        exit ( json_encode ( $result ) );
	}
}
?>

图片裁剪处理Action cropAction.php:

<?php
    
    $src_x = $_POST[‘xy‘][‘x‘];
    $src_y = $_POST[‘xy‘][‘y‘];
    
    $crop_width = $_POST[‘xy‘][‘w‘];
    $crop_height = $_POST[‘xy‘][‘h‘];
    
    $srcIm = @imagecreatefromjpeg($_POST[‘url‘]);
    $dstIm = @imagecreatetruecolor($crop_width,$crop_height);
    
    imagecopy($dstIm, $srcIm, 0, 0, $src_x , $src_y, $crop_width, $crop_height);
    imagejpeg($dstIm, ‘uploads/crop_‘.$_POST[‘imgname‘], 100); //生成图片
    
    imagedestroy($dstIm);
    imagedestroy($srcIm);
    echo json_encode(array(‘cropurl‘=>‘uploads/crop_‘.$_POST[‘imgname‘]));
?>

付上jcrop.gif小图标