位置: 编程技术 - 正文

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

  • 多交所得税退税会计分录
  • 增值税纳税申报表模板
  • 上一年度亏损,本年怎么计算企业所得税
  • 增值税发票遗失怎么操作
  • 网银转账往来款
  • 应纳税所得额为什么要减去60000
  • 其他权益投资公允价值变动怎么计量
  • 现金流量表余额等于货币资金吗
  • 自然人股权转让的纳税筹划
  • 股权转让有哪些方式
  • 股权转让涉及房屋产权变更怎么办
  • 京东预付定金是什么意思
  • 房地产企业简易计税
  • 缴纳城建税会计分录怎么做账
  • 期末数未分配利润为负数的会计分录怎么处理?
  • 房租当月无发票怎么办
  • 一般纳税人开技术服务费
  • 2018年一般纳税人转小规模
  • 什么时候需要计算环境熵变
  • 固定资产清理产生的费用
  • bios设置内存频率后黑屏
  • 开机自动进入安装模式
  • 什么是现金解款支付
  • 企业发放职工薪酬属于资金的运用
  • 海运发票模板
  • 公司向股东借的钱怎么还
  • php yield 异步
  • 技术维护服务费
  • vue3.0安装
  • 股东分红税率是20%还是25%
  • php自定义函数实现计算整数的四次方
  • php对象是值传递还是引用传递
  • php ajax 实现
  • 收到境外服务费可以退税吗
  • 收客户样品费怎么做分录
  • mongodb基本操作
  • java查询mongodb数据
  • sql将一列数据变成一行显示
  • 一直暂估原材料有什么风险
  • 对公户单笔转账有限额吗
  • 制造行业结转成本
  • 稿费的个税是怎么算的
  • 一整天的时间从几点到几点
  • 清空表sql语句
  • 资产处置损益影响损益吗
  • 现金存货盘盈盘亏计入什么科目
  • 转让不动产怎么计算增值税
  • 出口退税没有进项就退不了税吗?
  • 药店医保收入如何查询
  • 委托加工物资加工费的增值税计入成本吗
  • 会计软件入什么科目
  • 小规模纳税人购进税控设备如何抵扣
  • 建筑施工企业中,负责编制
  • 有收入有支出怎么求和
  • 增值税科目设置成多栏式还是三栏式好
  • Mysql中LAST_INSERT_ID()的函数使用详解
  • linux设置环境变量的命令
  • secondoption是什么意思
  • lsaass.exe
  • win7怎么禁止程序自启动
  • win10如何进行运行
  • perl时间函数
  • android不同module怎么相互调用
  • android textview设置字体
  • python虚拟环境管理
  • 游戏开发吧
  • 人走鸟不惊,出自于谁的诗句?
  • 监控服务器安装教程
  • android基础入门教程
  • javascript的dom
  • Android 添加数据到本地Excel表
  • 政务服务网怎么打印电子资格证书
  • 小规模纳税人一年开票额度是多少
  • 企业注销认缴与实缴是否还有风险
  • 税务局网上缴税
  • 工资薪金的税收金额是填实际发生还是帐载金额
  • 扬州儿童社保卡
  • 烟叶税比例
  • 车辆检测费属于什么科目
  • 个人所得税税收完税证明哪里打印
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设