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实现头像上传的更多相关文章

  1. jQuery插件AjaxFileUpload实现ajax文件上传时老是运行error方法 问题原因

    今天在用jQuery插件AjaxFileUpload实现ajax文件上传时,遇到一个问题,如图: 老是运行error.无法运行succes方法,追踪ajaxfileupload.js源代码发现: wa ...

  2. jQuery插件AjaxFileUpload实现ajax文件上传

    转自:http://www.cnblogs.com/linjiqin/p/3530848.html jQuery插件AjaxFileUpload用来实现ajax文件上传,该插件使用非常简单,接下来写个 ...

  3. jQuery插件之路(三)——文件上传(支持拖拽上传)

    好了,这次咱一改往日的作风,就不多说废话了,哈哈.先贴上源代码地址,点击获取.然后直接进入主题啦,当然,如果你觉得我有哪里写的不对或者欠妥的地方,欢迎留言指出.在附上一些代码之前,我们还是先来了解下, ...

  4. jquery头像上传剪裁插件cropper的前后台demo

    因为一个项目要做一个头像上传的功能,因此选择了使用jquery的头像插件cropper,cropper是一款使用简单且功能强大的图片剪裁jQuery插件,但是在使用的时候,有一个很大的坑需要注意,那就 ...

  5. 强大的flash头像上传插件(支持旋转、拖拽、剪裁、生成缩略图等)

    今天介绍的这款flash上传头像功能非常强大,支持php,asp,jsp,asp.net 调用 头像剪裁,预览组件插件. 本组件需要安装Flash Player后才可使用,请从http://dl.pc ...

  6. 【Bootstrap-插件使用】Jcrop+fileinput组合实现头像上传功能

    作者:Dreawer链接:https://zhuanlan.zhihu.com/p/24465742来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 作者:梦游的龙猫(转 ...

  7. [Bootstrap-插件使用]Jcrop+fileinput组合实现头像上传功能

    很久没有更新博客了,再不写点东西都烂了. 这次更新一个小内容,是两个插件的组合使用,实现头像上传功能. 业务需求: 头像上传功能,要对上传的文件进行剪切,且保证头像到服务器时必须是正方形的. 优化&l ...

  8. 头像上传uploadPreview插件

    原文链接:https://blog.csdn.net/Alisa_L/article/details/52923953 uploadPreview 今天写头像上传,使用到uploadPreview插件 ...

  9. php头像上传插件

    最近找到了一个比较简单实用的php头像上传插件,兼容IE8及以上等主流浏览器,分享给大家.效果如下: 1.首页效果图:默认显示默认图片. 2.点击图片(拥有裁剪框,可以拖动.缩放.裁剪头像等功能,注意 ...

随机推荐

  1. 文章导航-readme

    Spring-Boot Spring Boot(一) Hello World Redis 图解Redis之数据结构篇--简单动态字符串SDS 图解Redis之数据结构篇--链表 图解Redis之数据结 ...

  2. .Net Core 3.0 gRPC部署问题解决

    前言 .Net Core3.0终于如约而至的来了.在3.0中增加了许多东西.也有了许多的变化.今天我们看的就是在3.0中使用gRPC并遇到的问题.gRPC现在可以非常方便简洁的在.Net Core中使 ...

  3. 【linux】【mysql】mysql8.0开启远程访问及常见问题

    1.连接数据库 [root@localhost ~]# mysql -uroot -p Enter password: Welcome to the MySQL monitor. Commands e ...

  4. 23种设计模式之工厂方法(Factory Method Pattern)

    工厂方法 前面我们学习了简单工厂,发现一个问题就是简单工厂集合了矛盾,为了解决这个问题我们针对每一种产品提供一个工厂类.通过不同的工厂实例来创建不同的产品实例.在同一等级结构中,支持增加任意产品这种设 ...

  5. LAMP模拟搭建wordpress,phpmyadmin环境

    1.安装需要的环境,centos7的mysql叫mariadb,所有的配置文件默认就可以 [root@test ~]# yum install httpd php mariadb mariadb-se ...

  6. Docker下配置nacos

    前言 近段时间在学dubbo,dubbo-admin死活装不上,无论是本地还是docker,所以把目光投向了其他配置中心,我选定的是阿里新开源的nacos. 正文 拉取镜像到本地docker dock ...

  7. Java读源码之Thread

    前言 JDK版本:1.8 阅读了Object的源码,wait和notify方法与线程联系紧密,而且多线程已经是必备知识,那保持习惯,就从多线程的源头Thread类开始读起吧.由于该类比较长,只读重要部 ...

  8. Label的作用是什么,是怎么用的?

    label标签来定义表单控制间的关系,当用户选择该标签时,浏览器会自动将焦点转到标签相关的表单控件上. 如: <form> <label for="male"&g ...

  9. POJ 3784 Running Median (模拟水过带翻译)

    Description Moscow is hosting a major international conference, which is attended by n scientists fr ...

  10. 从.NET CORE2.2升级到3.0过程及遇到的一些问题

    RoadFlow工作流引擎从.NET Core2.2升级到3.0遇到了一些问题及解决方式这里记录一下. 1.DLL项目框架从2.2选择到3.0,这个没什么好说的,没有问题.重点的WEB层的一些变化. ...