位置: 编程技术 - 正文

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 视频播放控制代码

  • 出口退税附加税分录怎么写
  • 小规模计提税金及附加会计分录怎么写
  • 税务专业是什么学位
  • 增值税发票管理办法及细则
  • 劳务报酬怎么申报记账凭证
  • 库存现金是负数怎么调
  • 小规模纳税人申报时间
  • 水利建设基金可以按次申报吗
  • 500元以内的商品都有哪些
  • 如何处理固定资产长期待摊费
  • 核定征收可以改查账征收吗
  • 境内公司取得境外收入
  • 正版手写
  • 取得划拨或赠与资产需要缴企业所得税吗?
  • 公司电话费用
  • 电子承兑过期后怎么兑现处理合适呢?
  • 代理进口业务
  • 企业设备维修管理制度
  • 公司车辆过户给公司
  • 应收票据借方表示负债吗
  • 无形资产摊销表模板
  • 住房公积金证书更新
  • 长投成本法分红分录
  • 期间费用率计算方式
  • 增值税留抵税额会计科目
  • 补发票需要什么东西
  • 待抵扣进项税额是二级还是三级
  • win11怎么用win10界面
  • thinkphp3.2 layui
  • 结算备付金的账户是什么
  • hbuilder怎么下载
  • linux双ip路由设置方法
  • 硬盘最小的存储单位
  • 大堡礁的现状
  • vue切换背景图片
  • uniapp编译原理
  • thinkphp验证码刷新
  • php安装及使用教程
  • 工程施工余额在哪方
  • vue结合elementui
  • 本月增加的无形资产数量
  • 图书管理系统的软件结构图
  • 一维卷积padding
  • Python如何将字符串转化为数字
  • 国际货运代理公司有哪些?
  • 接受捐赠收入如何纳税
  • ecs怎么用
  • SQL Server 中 RAISERROR 的用法详细介绍
  • 增值税普票和卷式发票
  • 企业所得税核定管理办法
  • 小微企业所得税税率多少
  • 个体工商户核算方式填什么
  • sql server 新增字段
  • 业务招待费的企业所得税扣除标准
  • 给保安买大衣算贿赂吗
  • 借款收回的会计科目
  • 专项应付款如何核算
  • 工资代发户怎么开
  • 管理费用如何结转成本
  • 营业外收入的主要核算内容
  • 招标付款条件及比例
  • 销售毛利率越高越好吗
  • ie11 ua
  • tcpsyncookies
  • 搜狗浏览器ie8
  • xp系统怎么把ie浏览器放到桌面
  • windowxp一直在windowxp界面
  • 计算机 win10 桌面
  • WIN10系统中没有接入音频设备 要启动gui
  • win7z
  • centos 做bond
  • opengl纹理叠加
  • dos删除文件夹下所有文件 不删除父目录
  • eval()函数python
  • babel es6转es5原理
  • Android-ViewPager使用示例
  • vue仿知乎
  • ajax成功不走success
  • js如何修改style
  • 基本农田建设的土地
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设