位置: 编程技术 - 正文

jquery.Jcrop结合JAVA后台实现图片裁剪上传实例(jquery jwt)

编辑:rootadmin

推荐整理分享jquery.Jcrop结合JAVA后台实现图片裁剪上传实例(jquery jwt),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:jquery orgchart,jsoup jquery,java中jquery,jquery.validator,jquery jwt,jqueryprev,jquery jwt,jquery jwt,内容如对您有帮助,希望把文章链接给更多的朋友!

本文介绍了头像裁剪上传功能,用到的技术有 jQuery,springmvc,裁剪插件用的是jcrop(中间遇到很多坑,最终跨越)。

图片上传步骤:

1.用户选择图片

2.将图片传入后台:用户选择图片的时候选择的是各种各样的,但是我们的网页显示图片大小是有限的,所以我们就要在用户选择图片之后将图片添加到后台进行压缩,压缩成我们想要的大小,之后再显示到页面才好

3.利用jcrop裁剪工具对图片进行裁剪并且实时预览

4.点击确定按钮将裁剪用到的参数传入后台,后台图片进行剪切,之后缩放成我们需要的格式

jquery.Jcrop结合JAVA后台实现图片裁剪上传实例(jquery jwt)

5.最后将图片路径传到前台进行展示

前台页面代码为:

1.选择图片

2.提交:首先大家知道文件上传的时候用到的标签为:<input type="file"/> 但是有时候我们需要用ajax提交文件并且异步提交,我们如果是用form表单提交的话就不是异步,这样我们回到页面就刷新页面,非常的不方便,但是现在ajax还不能支持文件提交的方式,这时候我们就用到了jquery-form.js,这个文件支持我们用ajax提交文件,代码为:

这样就能将文件用ajax的方式提交到后台,注意这里用的是ajaxSubmit,这个方法对应jquery-form.js,后台代码为:

我在这规定图片在前台展示的大小为*,用到的图片裁剪压缩等的工具类为:

这样就将图片要裁剪的图片路径返回页面展示

3.之后就是图片裁剪了,图片裁剪功能我找了好多插件,最后锁定jcrop,也是因为它的demo打动了我(太好看了),之后就是导入文件,在我这里,我在页面接收后台返回来的图片路径之后启用jcrop,也就是openJcrop()方法,这样就可以加载jcrop插件了,具体大家想进一步了解这个裁剪工具,请到官网细细的研究,我就不再做过多的谈论了。

大家注意,在这里有个大坑,真的是大坑,就是重新选择图片的时候,被jcrop加载过的img的src是不能被修改的,这个当初卡了我好长时间,被jcrop加载一次jcrop就会生成一个自己的编辑对象(我自己的理解),这时候就和原来的img没有关系了,直到最后细细研究api才找到了一个方法,唯一的方法就是将这个jcrop销毁,就是jcrop_api.destroy(),这个有很大的学问,我就提示一点,就是将jcrop_api声明为全局变量,下面贴出js代码(和上边的html是在一个文件下):

这样我们就完成了编辑功能,之后我们点击提交就会将w,h,x,y参数传到后台。

标签: jquery jwt

本文链接地址:https://www.jiuchutong.com/biancheng/379298.html 转载请保留说明!

上一篇:jQuery中 $ 符号的冲突问题及解决方案(jquery简写符号)

下一篇:jquery html5 视频播放控制代码

  • 山东税务网上申报平台操作员查询
  • 专项应付款怎核算?
  • 个体工商户增值税怎么计算
  • 公司注销前的发言怎么写
  • 辅助生产车间最后结转到哪里
  • 职工福利费在期间费用表中怎么填
  • 接受捐赠的固定资产进项税额可以抵扣吗
  • 人工服务费发票
  • 2017年广告费税率
  • 汇算清缴所得税账务处理
  • 分配利润账务处理
  • 计提房产税的会计分录怎样做
  • 跨省增值税专用发票可以抵扣吗
  • 工程发票预交税金规定
  • 向投资者分配现金股利会计分录?
  • 实收资本和资产的关系
  • 公司聚餐费属于哪个科目
  • 投入资本回报率是总资产报酬率吗
  • 折价购入对投资者而言,是为以后多得利息
  • 融资租赁租金计算公式
  • wifi网速太慢了怎么回事
  • 进项税留抵期限
  • linux 创建sh
  • 差旅费包干什么意思
  • 上飞机可以带2个充电宝吗
  • zend framework手册
  • 短期贷款利息支出计算
  • vue封装组建
  • declare -i
  • 预付卡销售可以报销吗
  • 代销手续费的税率
  • 利息支出是利息费用嘛
  • 公司年底封账时间
  • 个体工商户没有收入要交税吗
  • 金蝶本月金额公式
  • 深入理解linux内核
  • 不抵扣的发票需要认证吗
  • 开源 okr
  • 弥补亏损的会计分录是怎样的
  • 职工食堂费用计入哪个科目
  • 年终奖不属于工资有法律依据吗
  • MySQL中distinct语句去查询重复记录及相关的性能讨论
  • 应付账款的入账价值应当包括增值税的进项税额
  • 政府补助怎么判断总额法还是净额法
  • 其他收益属于利得吗
  • 生产成本科目期末怎么结转
  • 消费税计税分录
  • 存货跌价准备是什么意思
  • 开公司的车出差违章算谁的
  • 账外资产处理
  • 外购材料的核算方法有
  • 其他应收款押金的现金流量
  • 私营公司待摊费怎么算
  • mysql 5.7.30安装
  • mysql5.7版本的服务的名字是
  • centos下载与安装
  • redhat常用命令总结
  • u盘装系统系统资料会被泄露吗
  • win8系统如何安装软件
  • win8怎么设置自动开机
  • linux 网站备份
  • centos8拨号上网
  • win7开始菜单在哪个文件夹
  • myfastupdate.exe - myfastupdate是什么进程文件 有什么用
  • win7经常断网是什么原因
  • linux文件操作常用命令
  • 红石cpu教程
  • win10系统怎么找到桌面
  • linux中makefile怎么写
  • unity 2Dtoolkit 插件创建中文字体
  • Node.js中的事件循环是什么
  • unity3d脚本怎么用
  • js原生dialog
  • 彻底解决老鼠进发动机舱
  • 税务所是县级机构吗
  • 我国历年财政支出总额
  • 四川国税局局长是谁
  • 车船税完税凭证去哪里打印
  • 宁波税务局网上办税服务厅
  • 为什么专利转让要交税
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设