更新图片之后,在前端显示图片不更新

在服务端的图片更新之后,前端的图片没有更新?

这是因为浏览器首次读取服务端的图片之后,再次读取同名图片,会直接从临时文件中读取,不再请求服务端。如果清除浏览器缓存,则图片更新。

可以修改图片名,或者给图片加上版本号。

var version = Math.random();
 
<img src="./test.png?"+version />
要在SSM框架中使用Ajax实现图片上传到服务器显示以及选择图片之后前端显示的功能,可以按照以下步骤进行操作: 1. 在前端页面中添加一个上传图片的input标签,并使用Ajax将图片上传到后台Controller中。 2. 在Controller中使用SpringMVC的文件上传功能,将图片保存到服务器指定的路径中。 3. 在Controller中返回图片的访问路径,然后使用Ajax在前端页面中显示图片。 4. 如果需要实现选择图片之后前端页面中显示,可以使用jQuery的Ajax和HTML5的File API来实现。首先,在前端页面中添加一个显示图片的img标签,然后通过jQuery选择文件,使用Ajax将文件上传到后台Controller中。在Controller中使用SpringMVC的文件上传功能,将图片保存到服务器指定的路径中。最后,在Controller中返回图片的访问路径,并使用File API在前端页面中显示图片。 具体实现细节参考以下代码: 前端页面: ```html <input type="file" id="fileUpload" name="fileUpload"/> <img id="preview" src="" style="display:none;"/> <script> $(function() { // 选择图片显示预览图 $("#fileUpload").change(function() { var file = this.files[0]; var reader = new FileReader(); reader.onload = function(e) { $("#preview").attr("src", e.target.result); $("#preview").show(); } reader.readAsDataURL(file); // 使用Ajax上传图片 var formData = new FormData(); formData.append("file", file); $.ajax({ url: "uploadImage", type: "POST", data: formData, contentType: false, processData: false, success: function(data) { // 显示上传的图片 $("#preview").attr("src", data); } }); }); }); </script> ``` 后台Controller: ```java @Controller public class ImageController { @RequestMapping(value="/uploadImage", method=RequestMethod.POST) @ResponseBody public String uploadImage(@RequestParam("file") MultipartFile file) { String fileName = UUID.randomUUID().toString() + ".jpg"; String filePath = "upload/" + fileName; try { // 保存图片服务器 file.transferTo(new File(filePath)); // 返回图片的访问路径 return filePath; } catch (Exception e) { e.printStackTrace(); return ""; } } } ``` 注意事项: 1. 在Controller中需要添加`@ResponseBody`注解,将返回值转换成JSON格式。 2. 在前端页面中需要添加jQuery和File API的引用。 3. 在服务器中需要设置文件上传的临时目录和上传文件的大小限制。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值