使用jquery插件uploadfive、jcrop实现头像上传
1、html页面部分代码：（实现选着图片时，jcrop能够刷新图片）
<script type="text/javascript">
$(function(){
$("#upload_org_code")
.uploadifive(
{
'queueID' : 'some_file_queue',//绑定到隐藏的div，使进度条消失。
'height' : 27,
'width' : 80,
'fileType' :'image',
'buttonText' : '选择图片',
//'swf' : '${pageContext.request.contextPath}/js/upload/uploadify.swf',
'uploadScript' : '${pageContext.request.contextPath}/uploadAvatar.do',
'fileObjName' : 'file',
'auto' : true,
'method' : 'post',
'multi' : false,
'cancelImg' : '${pageContext.request.contextPath}/js/upload/uploadify-cancel.png',
'fileTypeExts' : '*.jpg;*.png',
'fileSizeLimit' : '2MB',
'onUploadComplete' : function(file, data, response) {
//jcrop
$("#target").removeAttr("src");
$("#target")
.attr(
"src",
"${pageContext.request.contextPath}/uploadAvatar/"
+ strToJson(data).fileAvatarUrl);
$("#cutImageAvater").css("display","block");
displayJcrop();
//jcrop preview
$("#newpicture").removeAttr("src");
$("#newpicture")
.attr(
"src",
"${pageContext.request.contextPath}/uploadAvatar/"
+ strToJson(data).fileAvatarUrl);
},
//加上此句会重写onSelectError方法【需要重写的事件】
'overrideEvents' : [ 'onSelectError',
'onDialogClose' ],
//返回一个错误，选择文件的时候触发
'onError' : function(file, fileType,
data) {
alert("图片类型错误或者图片太大！");
}
});
});
//将字符串转换成json格式
function strToJson(data) {
var a = JSON.parse(data);
return a;
}
</script>
<script type="text/javascript">
var jcrop_api,boundx, boundy;//定义全局变量实现jcrop刷新图片的功能。
function displayJcrop(){
var $preview = $('#preview-pane'),
$pcnt = $('#preview-pane .preview-container'),
$pimg = $('#preview-pane .preview-container img'),
xsize = $pcnt.width(),
ysize = $pcnt.height();
// Create variables (in this scope) to hold the API and image size
// var jcrop_api,boundx, boundy,
// Grab some information about the preview pane
// destroy Jcrop if it is existed
if (typeof jcrop_api != 'undefined') //实现jcrop刷新图片的功能
jcrop_api.destroy();
boundx=null;boundy=null;jcrop_api=null;
$('#target').Jcrop({
onChange: updatePreview,
onSelect: updatePreview,
bgOpacity: .4,
setSelect: [ 100, 100, 50, 50 ],
aspectRatio: 1
},function(){
// Use the API to get the real image size
var bounds = this.getBounds();
boundx = bounds[0];
boundy = bounds[1];
// Store the API in the jcrop_api variable
jcrop_api = this;
// Move the preview into the jcrop container for css positioning
$preview.appendto(null);//释放预览图片的空间，使预览图片刷新。
$preview.appendTo(jcrop_api.ui.holder);
});
function updatePreview(c)
{
var x=c.x;
var y=c.y;
var w=c.w;
var h=c.h;
$("#x1").val(parseInt(x));
$("#y1").val(parseInt(y));
$("#w").val(parseInt(w));
$("#h").val(parseInt(h));
if (parseInt(c.w) > 0)
{
var rx = xsize / c.w;
var ry = ysize / c.h;
$pimg.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'
});
}
};
}
</script>
<%@ page language="java" contentType="text/html; charset=utf-8"pageEncoding="utf-8"%><html><head><title>头像上传</title><!-- 在裁剪图片页面中，引入两个js文件，和1个Jcrop需要的css文件(Jcrop包中有，注意引入顺序，先引入jQuery --><link rel="stylesheet" type="text/css"href="../css/upload/uploadifive.css"><link rel="stylesheet" type="text/css"href="../css/upload/jquery.Jcrop.min.css" /><link rel="stylesheet" type="text/css"href="../css/css/bootstrap.min.css" /><script type="text/JavaScript" src="../js/upload/jquery.min.js"></script><script type="text/javascript" src="../js/upload/jquery.uploadifive.min.js"></script><script type="text/javascript" src="../js/upload/jquery.Jcrop.min.js"></script><script type="text/javascript" src="../js/upload/jquery.color.js"></script><script type="text/javascript" src="../js/bootstrap.min.js"></script><style type="text/css">#some_file_queue {display: none;//绑定到隐藏的div，使进度条消失。}body { background-color: #d0e4fe;}</style><script type="text/javascript">$(function(){$("#upload_org_code").uploadifive({'queueID' : 'some_file_queue',//绑定到隐藏的div，使进度条消失。'height' : 27,'width' : 80,'fileType' :'image', 'buttonText' : '选择图片',//'swf' : '${pageContext.request.contextPath}/js/upload/uploadify.swf','uploadScript' : '${pageContext.request.contextPath}/uploadAvatar.do','fileObjName' : 'file','auto' : true,'method' : 'post','multi' : false,'cancelImg' : '${pageContext.request.contextPath}/js/upload/uploadify-cancel.png','fileTypeExts' : '*.jpg;*.png','fileSizeLimit' : '2MB',
'onUploadComplete' : function(file, data, response) {//jcrop$("#target").removeAttr("src");$("#target").attr("src","${pageContext.request.contextPath}/uploadAvatar/"+ strToJson(data).fileAvatarUrl);$("#cutImageAvater").css("display","block");displayJcrop();//jcrop preview$("#newpicture").removeAttr("src");$("#newpicture").attr("src","${pageContext.request.contextPath}/uploadAvatar/"+ strToJson(data).fileAvatarUrl);
},//加上此句会重写onSelectError方法【需要重写的事件】'overrideEvents' : [ 'onSelectError','onDialogClose' ],//返回一个错误，选择文件的时候触发'onError' : function(file, fileType,data) {alert("图片类型错误或者图片太大！");}});});//将字符串转换成json格式function strToJson(data) {var a = JSON.parse(data);return a;}</script>
<script type="text/javascript">var jcrop_api,boundx, boundy;//定义全局变量实现jcrop刷新图片的功能。
function displayJcrop(){ var $preview = $('#preview-pane'), $pcnt = $('#preview-pane .preview-container'), $pimg = $('#preview-pane .preview-container img'),
xsize = $pcnt.width(), ysize = $pcnt.height(); // Create variables (in this scope) to hold the API and image size // var jcrop_api,boundx, boundy,
// Grab some information about the preview pane // destroy Jcrop if it is existed if (typeof jcrop_api != 'undefined') //实现jcrop刷新图片的功能 jcrop_api.destroy(); boundx=null;boundy=null;jcrop_api=null; $('#target').Jcrop({ onChange: updatePreview, onSelect: updatePreview, bgOpacity: .4, setSelect: [ 100, 100, 50, 50 ], aspectRatio: 1 },function(){ // Use the API to get the real image size var bounds = this.getBounds(); boundx = bounds[0]; boundy = bounds[1]; // Store the API in the jcrop_api variable jcrop_api = this;
// Move the preview into the jcrop container for css positioning $preview.appendto(null);//释放预览图片的空间，使预览图片刷新。 $preview.appendTo(jcrop_api.ui.holder); }); function updatePreview(c) {var x=c.x; var y=c.y; var w=c.w; var h=c.h; $("#x1").val(parseInt(x)); $("#y1").val(parseInt(y)); $("#w").val(parseInt(w)); $("#h").val(parseInt(h)); if (parseInt(c.w) > 0) { var rx = xsize / c.w; var ry = ysize / c.h;
$pimg.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' }); } };
}</script><script type="text/javascript">function goBack(){window.history.back();}</script><style type="text/css">
/* Apply these styles only when #preview-pane has been placed within the Jcrop widget right: -280px; */ #preview-pane { display: block; position: absolute; z-index: 2000; top: 150px; left:450px; padding: 6px; border: 1px rgba(0,0,0,.4) solid; background-color: white;
-webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px;
-webkit-box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2); -moz-box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2); box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);}
/* The Javascript code will set the aspect ratio of the crop area based on the size of the thumbnail preview, specified here */#preview-pane .preview-container { width: 250px; height: 170px; overflow: hidden;}.inputAxiesClass{border-radius: 6px;}</style>
</head><body style="background-image: url(../images/section9_.jpg)"><div class="head" style="border-bottom-style: solid; border-bottom-color:#0066CC"> <a href="../indexmain.jsp"><img alt="阜特科技" src="../images/flogo_.png"> </a> </div><div id="cutImageAvater" style="width:600px;height:400px; display:none; margin-left: 10px" ><img src="" id="target" alt="上传图片展示区" style="width:300px;height:300px;" />
<div id="preview-pane"> <div class="preview-container"> <img src="" class="jcrop-preview" alt="预览图片" id="newpicture" /> </div> </div> <br> <form action="../saveAvatar.do" method="post" > x轴:<input type="text" size="4" id="x1" name="x" readonly="true" class="inputAxiesClass"/> y轴:<input type="text" size="4" id="y1" name="y" readonly="true" class="inputAxiesClass"/> 宽度:<input type="text" size="4" id="w" name="w" readonly="true" class="inputAxiesClass"/> 高度:<input type="text" size="4" id="h" name="h" readonly="true" class="inputAxiesClass"/> <input type="submit" value="保存裁剪" class="btn btn-success"/> <input type="button" value="返回首页" onclick="goBack()" class="btn btn-primary"/> </form> </div><form action="" method="post" enctype="multipart/form-data" style="margin-top:10px"><div id="some_file_queue"></div><input type="file" name="file" id="upload_org_code" /> </form> </html>
使用jquery插件uploadfive、jcrop实现头像上传的更多相关文章
- jQuery插件AjaxFileUpload实现ajax文件上传时老是运行error方法 问题原因
今天在用jQuery插件AjaxFileUpload实现ajax文件上传时,遇到一个问题,如图: 老是运行error.无法运行succes方法,追踪ajaxfileupload.js源代码发现: wa ...
- jQuery插件AjaxFileUpload实现ajax文件上传
转自:http://www.cnblogs.com/linjiqin/p/3530848.html jQuery插件AjaxFileUpload用来实现ajax文件上传,该插件使用非常简单,接下来写个 ...
- jQuery插件之路(三)——文件上传（支持拖拽上传）
好了,这次咱一改往日的作风,就不多说废话了,哈哈.先贴上源代码地址,点击获取.然后直接进入主题啦,当然,如果你觉得我有哪里写的不对或者欠妥的地方,欢迎留言指出.在附上一些代码之前,我们还是先来了解下, ...
- jquery头像上传剪裁插件cropper的前后台demo
因为一个项目要做一个头像上传的功能,因此选择了使用jquery的头像插件cropper,cropper是一款使用简单且功能强大的图片剪裁jQuery插件,但是在使用的时候,有一个很大的坑需要注意,那就 ...
- 强大的flash头像上传插件(支持旋转、拖拽、剪裁、生成缩略图等)
今天介绍的这款flash上传头像功能非常强大,支持php,asp,jsp,asp.net 调用 头像剪裁,预览组件插件. 本组件需要安装Flash Player后才可使用,请从http://dl.pc ...
- 【Bootstrap-插件使用】Jcrop+fileinput组合实现头像上传功能
作者:Dreawer链接:https://zhuanlan.zhihu.com/p/24465742来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 作者:梦游的龙猫(转 ...
- [Bootstrap-插件使用]Jcrop+fileinput组合实现头像上传功能
很久没有更新博客了,再不写点东西都烂了. 这次更新一个小内容,是两个插件的组合使用,实现头像上传功能. 业务需求: 头像上传功能,要对上传的文件进行剪切,且保证头像到服务器时必须是正方形的. 优化&l ...
- 头像上传uploadPreview插件
原文链接:https://blog.csdn.net/Alisa_L/article/details/52923953 uploadPreview 今天写头像上传,使用到uploadPreview插件 ...
- php头像上传插件
最近找到了一个比较简单实用的php头像上传插件,兼容IE8及以上等主流浏览器,分享给大家.效果如下: 1.首页效果图:默认显示默认图片. 2.点击图片(拥有裁剪框,可以拖动.缩放.裁剪头像等功能,注意 ...
随机推荐
- 设计模式笔记（一):Singleton 设计模式
今天开始学习设计模式,借此机会学习并整理学习笔记. 设计模式是一门不区分语言的课程,什么样的编程语言都可以用到设计模式.如果说java语法规则比作武功招式的话,那么设计模式就是心法. 设计模式共有23 ...
- java、if判断和循环
一.选择.循环语法 选择 if if(表达式)语句A: 如果表达式的值是真的,就会执行语句A,否则不执行 ...
- 环境搭建-ELK单节点环境搭建(02)
写在前面 常说:"工欲善其事必先利其器",这话想想也是一点毛病也没有,在开始学习任何技术之前,我们总得有一个实际可供操作的实验环境.有人说,"看十遍不如用一遍" ...
- for for in 给已有的li绑定click事件生成新的li也有click事件
想要给已有的li元素绑定一个click事件,点击生成新的li元素,并且新的li元素也要有click事件 //不能用for循环给每个li绑定click事件 因为这样的话 后面新生成的li就没有click ...
- vue平行组件传值
平行组件传值 通过平行组件传值可以实现任何情境下的传值,包括(父传子,子传父) 代码示例 <!DOCTYPE html> <html lang="en"> ...
- 多线程基础（主要内容转载于https://segmentfault.com/a/1190000014428190）
进程作为资源分配的基本单位 线程作为资源调度的基本单位,是程序的执行单元,执行路径(单线程:一条执行路径,多线程:多条执行路径).是程序使用CPU的最基本单位. 线程有3个基本状态: 执行.就绪.阻塞 ...
- yii2 对字段 自动加一 或 减一
用于数字类型,将值进行 累加 或者 累减 $count = 1, 就是加一 . $count = -1, 就是减一 . $effect = Model::updateAllCounters( [ ...
- selenium-webdriver中的显式等待与隐式等待
在selenium-webdriver中等待的方式简单可以概括为三种: 1 导入time包,调用time.sleep()的方法传入时间,这种方式也叫强制等待,固定死等一个时间 2 隐式等待,直接调用i ...
- 【TencentOS tiny】 超详细的TencentOS tiny移植到STM32F103全教程
移植前的准备工作 1. 获取STM32的裸机工程模板 STM32的裸机工程模板直接使用野火STM32开发板配套的固件库例程即可.可以从我github上获取https://github.com/jiej ...
- DRF框架学习总结
DRF框架安装配置及其功能概述 Django与DRF 源码视图解析 DRF框架序列化和返序列化 DRF框架serializers中ModelSerializer类简化序列化和反序列化操作 DRF源码s ...