cropper.js上传同一张第二次不显示问题

最新推荐文章于 2023-09-04 17:06:26 发布
最新推荐文章于 2023-09-04 17:06:26 发布
阅读量415 收藏
点赞数 2
分类专栏： js和jq
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44118181/article/details/106895966
版权

这里记录一下cropper.js裁剪上传同一张第二次不显示cropper.js问题

原因：input选中图片后value中已存在了图片路径，再次选中同一张不会触发change事件
解决：在取消裁剪的时候，给input的value清空，$(’#input’).val(’’)
（根据你的代码放在合适位置，这里是我个人情况）

荔枝不甜
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用cropper插件的头像裁剪功能 获取base64 图片压缩
weixin_43963309的博客
03-05 924
，头像裁剪裁剪功能做了大概有五天，效率太低了，有时候遇到问题不知道该怎么下手，在此非常感谢同事的耐心指导，下面是开发过程中遇到的问题，等功能开发完成后，会逐步更新完此文章… 1.图片第一次上传裁剪后，二次上传同一图片时无反应 图片第一次上传请求接口没有问题，第二次点击没有正常请求接口 原因是第一次上传成功时，触发的onchange事件,onchange事件会在内容改变且失去焦点时触发,而第二次上传...
前端主流面试官必问超详细面试题(整理完以秃头)持续更新中
qq_43375584的博客
07-07 3952
CDN利用最靠近每位用户的服务器，更快、更可靠地将音乐、图片、视频、应用程序及其他文件发送给用户，来提供高性能、可扩展性及低成本的网络内容传递给用户。CDN的作用：（1）在性能方面，引入CDN的作用在于：（2）在安全方面，CDN有助于防御DDoS网络攻击：懒加载也叫做延迟加载、按需加载，指的是在长网页中延迟加载图片数据，是一种较好的网页性能优化的方式。 比如：在较长的网页中。如果有很多图片，所有的图片都被加载出来，而用户只能看到可视窗口的那一部分图片数据，这样就浪费了性能。如果我们使用图片的懒加载就可以解决
vue-Cropper 重复上传同一张照片没反应问题
weixin_53587375的博客
04-22 503
vue-Cropper 重复上传同一张照片没反应问题 因为项目要求要使用vue-Cropper裁剪图片 总结一下 1.但是发现…如果两次选择同一张图片就出不来东西 然后看其他人的博客就是 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20210422105038755.png 2.本人小白表示不懂，然后发现… 这特喵的不就是input吗？？？ wdnmd，被自己蠢哭了 3.然后在input加一个value就好了 4.然后 在你@change=“getupload_YU
解决同样文件不能上传第二次问题
suiyi_99的博客
08-12 780
解决同样文件不能上传第二次问题 背景：上传头像（图片）时，第二次上传同样的图片，不会改变的问题 解决方案：将上传的路径/文件 清除 html: 当再次选择同样的图片时，会触发change事件。其实不是同样的图片或者文件，是同样名字的文件（图片）； 其中 event.target和event.srcElement是同样的值，若是input框中有id的话，可以直接document.getElementById(‘aa’) = null FileReader对象的readAsDataURL方法可
cropper.js使用中裁剪框不显示问题
进击的冉冉的博客
04-23 1725
cropper.js使用中裁剪框不显示问题 问题 在最近的项目中使用到了cropper.js，进行图片裁剪，由于项目中先上传了原始图片，在上传完成后显示图片，然后进行裁剪，结果图片加载完成，裁剪框没有显示。 改进方案 判断图片是否加载完成再初始化使用 代码如下： // html <div style="max-height: 500px"> <img ref="new_avater" id="new_avater" style="max-width: 100
解决cropperjs文件重复上传同一张照片没反应问题
祈澈菇凉
07-31 1378
之前图片上传的插件用的是，基于cropper.js的图片上传和裁剪： https://www.jianshu.com/p/f9986bd52ec6，现在考虑到一个用户体验的问题，但上传一张图片之后，发现裁剪的并没有自己想象中的好，再继续选择同一张图片进行二次裁剪，这个时候，就不会出现裁剪框，只有更换另外一张新的图片才行。 关于解决cropperjs文件重复...
【后台管理系统】—— Ant Design Pro结合插件（一）
柳柳66的博客
11-26 468
一、富文本braft-editor 安装并引用 npm install braft-editor --save import BraftEditor from 'braft-editor' import 'braft-editor/dist/index.css' state中初始内容 editorState: BraftEditor.createEditorState()...
前端综合面试题一(持续更新)
qq_43375584的博客
07-01 1448
Set具有以下方法：创建了一个新数组，新数组中是符合条件的所有元素查询数组中元素是否都满足要求，都满足则返回true,否则返回false查询数组中是否有元素满足要求，有满足则返回true并且不再往下执行,否则返回false扁平化数组，例如将二维数组转换成一维数组，三维数组转成一维二维数组。接受一个参数，不传入默认是1，表示拉平的层数。let关键字用来声明变量，使用 let声明的变量有几个特点：const 关键字用来声明常量， const声明有以下特点：ES6允许按照一定模式，从数组和对象中提取值，对变量进行
基于智能手机的报纸阅读器-论文
xiqsun0的博客
04-02 1046
源码下载 http://www.byamd.xyz/hui-zong-1/ 摘要 近几年来，智能手机的迅猛发展给人们的生活带来了极大的改变，移动互联网时代的来临使得人手拥有一台配置强悍的智能手机已不再是奢望。但随着社会老龄化问题的日益严重，智能手机市场对老年人市场的投入却依旧跟不上时代发展的步伐。老年人由于视力衰退，阅读报纸上的文字较为吃力，长时间戴眼镜更会加剧眼睛的疲劳状况。本设计提出了用智能手机帮助老年人阅读报纸的可能，并实现了一款基于 Android 智能手机的应用。 本设计实现了一款基于安卓智
基于cropperjs和canvas实现的图片裁剪
08-28
基于cropperjs和canvas实现的图片裁剪
cropperjs重新选择图片后，裁切框内容不更新
2023年最新地推相关信息
03-25 650
【问题现象】使用了cropperjs在页面上裁切图片，重新上传图片后，裁切框内容不更新。 【解决方案】在重新上传图片成功后，使用this.cropper.destroy();先销毁之前的cropper实例，再重新创建，就可以解决这个问题啦~ ...
webuploader + cropper 真正的PC/H5同一页面多实例+裁剪+分片上传asp+demo
xuemu2008的专栏
11-01 749
这两个插件 webuploader 和 cropper 应该都不陌生了。其功能不做介绍了，本人在实现同一页面多实例带裁剪分片上传功能上也踩过一些坑。网上下载了几个demo， 要命不完整的，要么裁剪后还是上传的原图，居然其缩略图通过formData 接口随带参数方式 request 来发送，浏览器提示数据过长，那是不理想的做法。 这里先说一个 webuploader 对开启 DND 功能后，在同一页面多实例模式可能会有一个小小的bug，自动插入的下面代码多出来的有，网上的所有相关demo都是这...
上传图片截图预览控件不显示cropper.js 跨域问题
weixin_30468137的博客
05-22 131
上传图片到图片服务器，因为域名不同，多以会有跨域问题。 No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://img.xxx.com' is therefore not allowed access. 照看代码发现，cropper.js里面对图片的引用路径做...
cropper 裁剪上传java_图片裁剪(cropper)后上传问题
weixin_31129503的博客
02-28 269
最近工作需要处理头像裁剪以及上传，研究了几天，写点心得，提醒自己记住踩过的坑，能帮助别人当然更好。功能基本就是这样：这里需要注意的是：拿到需求后，不要急于直接上手，花费半个小时，甚至更长时间缕清整个脉络是很有必要的，本人就因为后台接口的问题，返工了...这里只是对完成方法的概述，具体实现功能请自行解决(真的一搜就有)！！！起先，对这种功能以前并没有接触过，但是鉴于能力问题，采取插件可能是最好的方法...
vue-cropper在ie11下选择本地图片后，无显示、拒绝访问的问题
最新发布
hamupp的博客
09-04 780
关键的解决问题的代码就是beforeUpload这个方法，使用URL.createObjectURL将你选择的本地图片文件转为一个blob url，即可保证ie11和chrome下都可以正常选择本地图片并且进行后续操作。但如果你不需要考虑ie11，只用chrome的话，那这里用new FileReader().readAsDataURL()把图片文件转为base64格式的数据也可以用。这就导致在ie11的环境下，图片只能传入blob url的格式，传入其他的格式比如base64的就处理不了。
Vue上传文件或图片第一次触发，第二次不触发的问题
Kino的博客
01-04 1656
这个问题主要是文件上传点击一次执行change事件，第二次点击相同的文件会上传不成功，主要是让file的target.value清空一下。 重置一遍value，至关重要。
利用cropper插件裁剪本地图片，然后将裁剪过后的base64图片上传至七牛云空间
weixin_30808575的博客
03-14 345
　　　现在做的项目需要做一些图片处理，由于时间赶急，之前我便没有处理图片，直接将图片放在input[type=file]里面，以文件的形式提交给后台，这样做简直就是最低级的做法，之后各种问题便出来了，人物头像需要正方形，这样做难免出现异性，显示的时候便是各种丑。 　　　项目赶完之后这两天优化本想在网上找一个现成的图片裁剪插件使用，但是在百度上面和jq22上面找了半天找到的都是一些服务器裁剪的事例...
cropper插件 3种规格的预览图 不能显示出来
XLWla
11-30 2805
多次调试 项目上的文件发现： this.avatarPreview.selector有问题,是未定义，把代码改this.avatarPreview.selector 有问题,是未定义，把代码改this.avatarPreview 三个预览图就能正常显示了
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值