基于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> < ...
随机推荐
- C#程序（含多个Dll）合并成一个Exe
把C#程序(含多个Dll)合并成一个Exe的超简单方法 开发程序的时候经常会引用一些第三方的DLL,然后编译生成的exe文件就不能脱离这些DLL独立运行了. 但是,很多时候我们本想开发一款只需要一 ...
- hadoop2.0的datanode数据存储文件夹策略的多个副本
在hadoop2.0在,datanode数据存储盘选择策略有两种方式复制: 首先是要遵循hadoop1.0磁盘文件夹投票,实现类:RoundRobinVolumeChoosingPolicy.java ...
- Maven: NoClassDefFoundError: org/codehaus/plexus/classworlds/launcher/Launcher
为了和团队开发环境保持一致,须要 在Ubuntu上安装maven2.2.1,引文我之前已经用apt-get命令安装了3.3的maven.在运行maven命令时报错: Maven: NoClassDef ...
- Angularjs里面跨作用域
Angularjs里面跨作用域的实战! 好久没有来写博客了,最近一直在用Google的AngularJS,后面我自己简称AngularJS就叫AJ吧! 学习AngularJS一路也是深坑颇多啊-- ...
- linux下面的中断处理软件中断tasklet机制
參考: <Linux内核设计与实现> http://blog.csdn.net/fontlose/article/details/8279113 http://blog.chinaunix ...
- 中国人被“清朝GDP世界第一”忽悠了！
中国人被"清朝GDP世界第一"忽悠了!"鸦片战争前的清朝GDP世界第一",这一说法在中国流传非常广.追根溯源,最早提出这一观点的似乎是英国学者麦迪森,他的一项猜 ...
- LESS使用介绍
使用: 在客户端使用 引入你的 .less 样式文件的时候要设置 rel 属性值为 "stylesheet/less": <link rel="stylesheet ...
- 设置韩澳大利亚sinox弄winxp清除字体和界面美观
澳大利亚开始与汉sinox一直以为接口暗淡,字体比较模糊,否winxp光明,导致眼比较辛苦的眼睛.比方说,可能不那么黯淡刺眼,有益眼睛,但我不能忍受字体模糊.即使调整分辨率,,但是字体模糊还是没有改观 ...
- java 服务治理办法
在大规模服务化之前.应用可能仅仅是通过RMI或Hessian等工具.简单的暴露和引用远程服务,通过配置服务的URL地址进行调用.通过F5等硬件进行负载均衡. (1) 当服务越来越多时.服务URL配置管 ...
- Linq的Distinct太不给力了[转]
假设我们有一个类:Product public class Product { public string Id { get; set; } public string Name { get; set ...