基于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> < ...
随机推荐
- ASP.NET Identity
使用ASP.NET Identity实现基于声明的授权 阅读目录 走进声明的世界 创建并使用声明 基于声明的授权 使用第三方来身份验证 小节 在这篇文章中,我将继续ASP.NET Identity 之 ...
- HDU 4022 Bombing STL 模拟题
人工模拟.. #include<stdio.h> #include<iostream> #include<algorithm> #include<vector ...
- Websocket实例
C#版Websocket实例 websocket有java.nodejs.python,Php等等版本,我使用的是C#版本,服务器端是Fleck,github地址:https://github.com ...
- chrome扩展第三方浏览器下载安装
1.使用其他浏览器打开谷歌应用市场,复制扩展详情地址url 2. 粘贴到:http://chrome-extension-downloader.com/中进行扩展的下载. 3. 拖拽到chrome e ...
- CSS3图片轮播效果
原文:CSS3图片轮播效果 在网页中用到图片轮播效果,单纯的隐藏.显示,那再简单不过了,要有动画效果,如果是自己写的话(不用jquery等),可能要费点时间.css3的出现,让动画变得不再是问题,而且 ...
- Display Database Image using MS SQL Server 2008 Reporting Services
原文 Display Database Image using MS SQL Server 2008 Reporting Services With the new release of MS SQL ...
- Message解析流程（转）
Message的解析作为一个共同组件.对应不同格式的msg文件有不同的实现类来解析.用SAXParser. 1:Final class MessageResourceManager 在Start方 ...
- NSOJ 一个人的旅行(图论)
虽然草儿是个路痴(就是在杭电待了一年多,居然还会在校园里迷路的人,汗~),但是草儿仍然很喜欢旅行,因为在旅途中 会遇见很多人(白马王子,^0^),很多事,还能丰富自己的阅历,还可以看美丽的风景……草儿 ...
- httppost body的实现， 和body是gb2312等编码的实现
使用的是http4.X 版本,里面推荐使用的post是key value的形式 List<NameValuePair> formparams = new ArrayList<Name ...
- jQuery版推箱子游戏详解和源码
前言 偶然间看到很多用js写游戏的感觉很炫酷的样子,所以就想试试,就看了一些资料和某前端站点的视屏.于是乎就自己动手实践了一下,上推箱子截图 感觉很丑陋,但是功能是实现了.再说貌似大多都是这样的吧,这 ...