基于Jcrop的图片上传裁剪加预览
最近自己没事的时候研究了下图片上传，发现之前写的是有bug的，这里自己重新写了一个！
1、页面结构
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="renderer" content="webkit">
<link rel="stylesheet" href="jquery.Jcrop.min.css">
<body>
<form method="post" id="uploadimg" name="uploadimg" action="" enctype="multipart/form-data" target="apply_iframe">
<input type="file" id="fileChange" style="color:#000" name="imageFileGuide"/>
</form>
<div class="prew" style="width:300px;height:217px;background:#ccc;position:relative;">
<img src="" id="target" width="100%" style="display:none;position:absolute;top:0;left:0;"/>
<div id="filterPrew" style="display:none;position:absolute;top:0;left:0;"></div>
<img src="" id="filterPrewLoad" style="display:none;" />
</div>
<label>X1坐标</label><input type="text" size="4" id="x1" name="x1" />
<label>Y1坐标</label><input type="text" size="4" id="y1" name="y1" />
<label>X2坐标</label><input type="text" size="4" id="x2" name="x2" />
<label>Y2坐标</label><input type="text" size="4" id="y2" name="y2" />
<label>裁剪的宽</label><input type="text" size="4" id="w" name="w" />
<label>裁剪的高</label><input type="text" size="4" id="h" name="h" />
<label>缩放比例</label><input type="text" size="4" id="R" name="R" value="0"/>
</body>
</html>
<script src="jquery.min.js"></script>
<script src="jquery.Jcrop.min.js"></script>
<script src="upfile.js"></script>
<script>
var dom = $('#fileChange')[0];
var prev = $('.prevw')[0];
szyFile.init(dom,prev,{'Ratio':1.2,'selectWidth':400,'selectHeight':300});
</script>
js逻辑处理
var szyFile = {
fileDom:null,//html 文件上传控件
preview:null,//图片预览的区域
imgMaxSize:2,//图片大小最大2M
filterDom:[],//符合条件的元素
filterImgDataUrl:[],//图片的dataUrl数据
dragArea:null,//拖放区域
jcrop_api:null,
selectWidth:300,//选框宽度
selectHeight:300,//选框高度
Ratio:1,//上传图片比例
imgRegExp:function(f){
if(!/\.(jpg|jpeg|png)$/i.test(f.name)){
alert('您上传的不是图片,请重新选择后上传！');
return false;
}
return true;
},
clearCoords:function(){
$('#coords input').val('');
},
showCoords:function(c){
$('#x1').val(c.x);
$('#y1').val(c.y);
$('#x2').val(c.x2);
$('#y2').val(c.y2);
$('#w').val(c.w);
$('#h').val(c.h);
},
jcropInit:function(ID){
$(ID).Jcrop({
onChange: szyFile.showCoords,
onSelect: szyFile.showCoords,
onRelease: szyFile.clearCoords,
aspectRatio: szyFile.Ratio,
keySupport: false
},function(){
szyFile.jcrop_api = this;
});
$('#coords').on('change','input',function(e){
var x1 = $('#x1').val(),
x2 = $('#x2').val(),
y1 = $('#y1').val(),
y2 = $('#y2').val();
szyFile.jcrop_api.setSelect([x1,y1,x2,y2]);
});
},
isSupport:function(){
if(window.File && window.FileReader && window.FileList && window.Blob) {
return true;
} else {
return false;
}
},
setPrew:function(w,h,ID,modle){
var _top = 0;
var _left = 0;
if(w >= h){
var imgB = szyFile.selectWidth/w;
var imgB1 = w/h;
if(h*imgB <= szyFile.selectHeight){
$(ID).css('width',szyFile.selectWidth+'px');
$(ID).css('height',h*imgB+'px');
_top = ((szyFile.selectHeight-h*imgB)/2);
_left = 0;
$(ID).css('top',_top+'px');
$(ID).css('left',_left+'px');
$('#R').val(w/szyFile.selectWidth);
}else{
$(ID).css('width',szyFile.selectHeight*imgB1+'px');
$(ID).css('height',szyFile.selectHeight+'px');
_top = 0;
_left = ((szyFile.selectWidth-szyFile.selectHeight*imgB1)/2);
$(ID).css('top',_top+'px');
$(ID).css('left',_left+'px');
$('#R').val(h/szyFile.selectHeight);
}
szyFile.jcropInit(ID);
$('.jcrop-holder').css({'position':'absolute','top':_top+'px','left':_left+'px'});
if(modle == 0){
$('.jcrop-tracker').css({'filter':'alpha(opacity=30); BACKGROUND-COLOR: white'});
}
}else{
var imgB = szyFile.selectHeight/h;
var imgB1 = h/w;
if(w*imgB <= szyFile.selectWidth){
$(ID).css('width',w*imgB+'px');
$(ID).css('height',szyFile.selectHeight+'px');
_top = 0;
_left = (szyFile.selectWidth - w*imgB)/2;
$(ID).css('top',_top+'px');
$(ID).css('left',_left+'px');
$('#R').val(h/szyFile.selectHeight);
}else{
$(ID).css('width',szyFile.selectWidth+'px');
$(ID).css('height',szyFile.selectWidth*imgB1+'px');
_top = (szyFile.selectHeight - szyFile.selectWidth*imgB1)/2;
_left = 0;
$(ID).css('top',_top+'px');
$(ID).css('left',_left+'px');
$('#R').val(w/szyFile.selectHeight);
}
szyFile.jcropInit(ID);
$('.jcrop-holder').css({'position':'absolute','top':_top+'px','left':_left+'px'});
if(modle == 0){
$('.jcrop-tracker').css({'filter':'alpha(opacity=30); BACKGROUND-COLOR: white'});
}
}
},
select:function(e){
var e = e || window.event;
if(szyFile.isSupport()){
if(szyFile.jcrop_api){
szyFile.jcrop_api.destroy();
$('#target').remove();
$('<img src="" id="target" width="100%" style="display:none;position:absolute;top:0;left:0;"/>').insertBefore('#filterPrew');
}
$('#target').show();
$('#filterPrew').hide();
var files = e.target.files || e.dataTransfer.files;
for(var i = 0, f; f = files[i]; i++){
if(f){
if(szyFile.imgRegExp(f)){
if(f.size > szyFile.imgMaxSize*1024*1024){
alert('图片过大,您上传的图片大于'+szyFile.imgMaxSize+'MB');
return false;
}else{
szyFile.filterDom.push(f);
var reader = new FileReader();
reader.onload = (function(){
return function(e){
$('#target').attr('src',this.result);
var resultImg = this.result;
var img = new Image();
img.onload = function(){
var w = this.width;
var h = this.height;
szyFile.setPrew(w,h,'#target',1);
}
img.src = this.result;
};
})(f);
reader.readAsDataURL(f);
}
}
}
}
}else{
if(szyFile.jcrop_api){
szyFile.jcrop_api.destroy();
$('<div id="filterPrew" style="display:none;position:absolute;top:0;left:0;"></div>').insertAfter('#target');
}
$('#target').hide();
$('#filterPrew').show();
var src = $('#fileChange')[0].value;
try {
var image = new Image();
image.dynsrc = src;
var filesize = image.fileSize;
} catch (err) {
$('#fileChange')[0].select();
src = document.selection.createRange().text;
}
if(!/\.(jpg|jpeg|png)$/i.test(src)){
alert('您上传的不是图片,请重新选择后上传！');
return false;
}
$('#filterPrew').css('filter','none');
$('#filterPrewLoad').css('filter','none');
$('#filterPrew').css('filter', 'progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod = "scale", src="'+src+'")');
$('#filterPrewLoad').css('filter', 'progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod = "image", src="'+src+'")');
var w = $('#filterPrewLoad').width();
var h = $('#filterPrewLoad').height();
szyFile.setPrew(w,h,'#filterPrew',0);
}
},
fileOnchange:function(elm){
if(elm.addEventListener){
elm.addEventListener('change', this.select, false);
}else{
elm.onchange = function(){
szyFile.select();
}
}
},
fileValue:function(){
return this.fileDom.value;
},
setRadio:function(num){
if(num && num > 0){
szyFile.Ratio = num;
}
},
setSelectWidth:function(num){
if(num && num > 0){
szyFile.selectWidth = num;
}
},
setSelectHeight:function(num){
if(num && num > 0){
szyFile.selectHeight = num;
}
},
setImgMaxSize:function(num){
if(num && num > 0){
szyFile.imgMaxSize = num;
}
},
init:function(dom,prev,config){
if(config.imgMaxSize && config.imgMaxSize > 0){
szyFile.imgMaxSize = config.imgMaxSize;
}
if(config.selectWidth && config.selectWidth > 0){
szyFile.selectWidth = config.selectWidth;
}
if(config.selectHeight && config.selectHeight > 0){
szyFile.selectHeight = config.selectHeight;
}
if(config.Ratio && config.Ratio > 0){
szyFile.Ratio = config.Ratio;
}
if(dom) this.fileDom = dom;
if(prev) this.preview = prev;
this.fileOnchange(dom);
}
}
代码调用如下
$(function(){
var dom = $('#fileChange')[0];
var prev = $('.prevw')[0];
szyFile.init(dom,prev,{'Ratio':1.2,'selectWidth':400,'selectHeight':300});
});
附件下载地址：兼容IE6+ 以上大部分浏览器，特殊浏览器没有测试！
基于Jcrop的图片上传裁剪加预览的更多相关文章
- java多图片上传--前端实现预览--图片压缩 、图片缩放，区域裁剪，水印，旋转，保持比例。
java多图片上传--前端实现预览 前端代码: https://pan.baidu.com/s/1cqKbmjBSXOhFX4HR1XGkyQ 解压后: java后台: <!--文件上传--&g ...
- web 图片上传实现本地预览
在说上传之前先说说如何替换or美化浏览器自带的简陋上传按钮(自定义自己的上传按钮 如:img): 1.将自定义上传按钮上方添加 input file 框,实现input实现透明处理. 2.对自定义上传 ...
- jsp+springmvc实现文件上传、图片上传和及时预览图片
1.多文件上传:http://blog.csdn.net/a1314517love/article/details/24183273 2.单文件上传的简单示例:http://blog.csdn.net ...
- 分离与继承的思想实现图片上传后的预览功能：ImageUploadView
本文要介绍的是网页中常见的图片上传后直接在页面生成小图预览的实现思路,考虑到该功能有一定的适用性,于是把相关的逻辑封装成了一个ImageUploadView组件,实际使用效果可查看下一段的git效果图 ...
- Asp.net中FileUpload控件实现图片上传并带预览显示
单一图片上传——“选择”+“上传”,.NET默认模式: 1.实现原理: 采用FileUpload控件默认的使用方式,先由“选择”按钮选择图片,然后单击“上传”按钮完成上传,并可在“上传”按钮的 ...
- 图片上传前的预览（PHP）
1.先创建一个file表单域,我们需要用它来浏览本地文件.<form name="form1" id="form1" method="post& ...
- jquery实现图片上传前本地预览
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8" ...
- file图片上传之前先预览
链接:https://www.cnblogs.com/tandaxia/p/5125275.html 记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<inp ...
- js实现图片上传后即时预览
//关于FileReader对象 http://blog.csdn.net/zk437092645/article/details/8745647 <!DOCTYPE html> < ...
随机推荐
- 3.Swift翻译教程系列——Swift基础知识
英语PDF下载链接http://download.csdn.net/detail/tsingheng/7480427 Swift是用来开发iOS和OS X应用的新语言,可是很多地方用起来跟C或者OC是 ...
- 使用Advanced Installer将.exe程序重新封装为.msi程序
原文:使用Advanced Installer将.exe程序重新封装为.msi程序 使用Advanced Installer将.exe程序重新封装为.msi程序 首先安装Advanced instal ...
- urlrewrite使用地址重写
地址重写: 主要是为了站点的安全. 比如我们平时的地址请求 地址重写前,訪问路径是: /read.egov?action=read&bid=2 地址重写后,訪问路径是:/read-read-2 ...
- 以太网PHY 芯片之 MII/MDIO接口详解
本文主要分析MII/RMII/SMII,以及GMII/RGMII/SGMII接口的信号定义,及相关知识,同时本文也对RJ-45接口进行了总结,分析了在10/100模式下和1000M模式下的设计方法. ...
- 【Linux】CentOS系统
版本号:CentOS release 5.7 1)查看系统版本号 cat /etc/readhat-release 2)安装软件 wget 资源链接 make make install 在线安装: ...
- Web采矿技术
一.数据挖掘 数据挖掘是运用计算机及信息技术,从大量的.不全然的数据集中获取隐含在当中的实用知识的高级过程.Web 数据挖掘是从数据挖掘发展而来,是数据挖掘技术在Web 技术中的应用.Web 数据 ...
- 第8章 装饰模式（Decorator Pattern）
原文 第8章 装饰模式(Decorator Pattern) 概述: 装饰模式是在不必改变原类文件和使用继承的情况下,动态地扩展一个对象的功能.它是通过创建一个包装对象,也就是装饰来包裹真实的对象. ...
- 找呀志_使用SQLiteDatabase增删改提供的搜索方法和事务
知识具体解释:http://blog.csdn.net/zhaoyazhi2129/article/details/9026093 MainActivity.java,User.java,BaseDa ...
- UVA - 10014 - Simple calculations （经典的数学推导题！！）
UVA - 10014 Simple calculations Time Limit: 3000MS Memory Limit: Unknown 64bit IO Format: %lld & ...
- Hadoop之环境搭建
初学Hadoop之环境搭建 阅读目录 1.安装CentOS7 2.安装JDK1.7.0 3.安装Hadoop2.6.0 4.SSH无密码登陆 本文仅作为学习笔记,供大家初学Hadoop时学习参考. ...