fileuploadJs+JcropJs+php综合小应用 实现图片拖拽上传与剪裁功能的demo
日期：2014-05-16 浏览次数：20599 次
fileuploadJs+JcropJs+php综合小应用 实现图片拖拽上传与裁剪功能的demo
demo.js:
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({
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
