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小图标
结束.
fileuploadJs+JcropJs+php综合小应用 实现图片拖拽上传与裁剪功能的demo,布布扣,bubuko.com