关于图片裁剪上传时同一张图片缓存问题的处理

做项目的时候,遇到了这样一个问题:

这个时候,我点击  “更换封面” ,跳出如下页面

此时,我还选择这个封面的原图,并进行裁切,如下图红色框里为我裁切后的头像

点击  “确定”  后,发现头像还是原来的头像,但是看接口里给的参数没错啊?!是裁切之后的图片啊?!

因为选择的是原来的图片,浏览器之前缓存了这个图片,这时再做修改也没有用。

解决办法是在图片后面加随机数:

src: d.src.split("t")[0] + "?t=" + (new Date()).getTime()

给浏览器制造一个假象,认为图片不是原来的图片

时间: 2024-07-30 01:31:53

关于图片裁剪上传时同一张图片缓存问题的处理的相关文章

PHP+jQuery.photoClip.js支持手势的图片裁剪上传实例

PHP+jQuery.photoClip.js支持手势的图片裁剪上传实例,在手机上双指捏合为缩放,双指旋转可根据旋转方向每次旋转90度,在电脑上鼠标滚轮为缩放,双击则顺时针旋转90度. 下面让我们来看看核心代码: post的是base64,后端处理base64转存图片. 1 $("#clipArea").photoClip({ 2 width: 200, 3 height: 200, 4 file: "#file", 5 view: "#view"

图片裁剪上传Jcrop

<link rel="stylesheet" href="../css/jquery.Jcrop.css"> <script src="../js/jquery.Jcrop.js"></script> 先是两个必不可少的东西 <style type="text/css"> /* Apply these styles only when #preview-pane has been

vue中使用cropperjs进行图片裁剪上传

下面代码直接就可以复制使用了,但是需要在本地下个cropperjs,下载命令:npm install cropperjs --save-dev <template> <div id="yin"> <div id="demo"> <!-- 遮罩层 --> <div class="container" v-show="panel"> <div> <img

移动端图片裁剪上传—jQuery.cropper.js

jQuery.cropper.js是一款使用简单且功能强大的图片剪裁jQuery插件.该图片剪裁插件支持图片放大缩小,支持图片旋转,支持触摸屏设备,支持canvas,并且支持跨浏览器使用. 一.移动端获取本地相册兼容 安卓:<input type="file" accept="image/*" capture="camera" > ios:<input type="file" accept="ima

图片裁剪上传插件——jquery.photoClip.js

想要裁剪图片上传: 需要依赖的的插件为: [jquery.photoClip.js] 插件[iscroll-zoom.js] 插件[hammer.js] 插件 [lrz.all.bundle.js] 插件 [jquery-2.1.3.min.js] 在前端页面调取: <div id="clipArea"></div> <input type="file" id="file"> <button id=&qu

文件(图片)上传组件

1. 问题: https://zhuwenlong.com/blog/51f6519532ffd70b27000001 HTML5 File api 实现断点续传 http://www.jianshu.com/p/2a42a0c89640 html5 上传本地图片处理各种问题 2. 组件: http://fex.baidu.com/webuploader/ http://fex.baidu.com/webuploader/demo.html 百度上传组件 http://kindeditor.ne

使用JCrop进行图片裁剪,裁剪js说明,裁剪预览,裁剪上传,裁剪设计的图片处理的工具类和代码

?? 1.要想制作图片裁剪功能,可以使用网上的裁剪工具JCrop,网址是:https://github.com/tapmodo/Jcrop/ 案例效果如下: 2.引入JCrop的js代码,具体要引入那些js可以参考JCrop案例: 3.编写的html代码如下: <div id="light" class="white_content"> <div class="vatitlee"> 封面截取 <div class=&

使用Kindeditor的多文件(图片)上传时出现上传失败的解决办法/使用Flash上传多文件(图片)上传时上传失败的解决办法

近来用户反映希望我们把在线编辑器中的多图片上传功能实现,因为他们在编辑商品描述时经常会有一次上传多张图片的需求,如果要逐张选择的话效率很低,客户的需求就是我们的追求,很快我们就把完善功能排到了日程表中,要求尽快实现. 我们在项目中使用的在线编辑器是Kindeditor4.1.10,它们的多文件上传插件是使用Flash实现的,原本应该就是能使用的,但为什么老是显示上传失败的,百度了一下前人的经验和教训,出现这种情况,有两种可能:1)上传的目标文件夹没有写权限,导致上传的文件无法进行写操作,所以上传

HTML5 本地裁剪图片并上传至服务器(转)

很多情况下用户上传的图片都需要经过裁剪,比如头像啊什么的.但以前实现这类需求都很复杂,往往需要先把图片上传到服务器,然后返回给用户,让用户确定裁剪坐标,发送给服务器,服务器裁剪完再返回给用户,来回需要 5 步.步骤繁琐不说,当很多用户上传图片的时候也很影响服务器性能. HTML5 的出现让我们可以更方便的实现这一需求.虽然这里所说的技术都貌似有点过时了(前端界的“过时”,你懂的),但还是有些许参考价值.在这里我只说一下要点,具体实现同学们慢慢研究. 下面奉上我自己写的一个demo,在输入框中选好