近段时间在修改项目上的一个功能时,发现可以用这种方式实现点击图片并提交服务器后回显(这里多亏了我的项目经理),将此方法分享给大家作讨论。
当然为了突出关键代码没有写服务器代码:
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"/> <meta name="description" content="这里是实现点击图片, 调出file的选择文件窗口, 确认后更改图片并回显"> <title>换图</title> <script type="text/javascript" src="jquery-1.4.2.js"></script> <style type="text/css"> .file{width: 480px;height:400px;position:absolute;left: 2;cursor:pointer;border-color: orange; filter:alpha(opacity:0);opacity: 0} .image{position:absolute; border-color: red;left: 2} </style> </head> <body> <div class="main-div"> <p>点击下图可更改图片</p> <img src="img/hezi.jpg" width="480" height="400" class="image" id="image"> <input type="file" class="file" id="image-input"> </div> <script type="text/javascript"> $(function(){ $("#image-input").change(function (){ $("#image").attr("src",$("#image-input").val()); }); }); </script> </body> </html>
这里image是作图片展示的,image-file提供文件选择和服务器提交,让image和image-file相对定位,两者大小一致,image-file设置完全透明并覆盖在image上(不需要设置z-index属性值,file的z-index值默认比img大,请见http://www.w3school.com.cn/cssref/pr_pos_z-index.asp了解更多),鼠标点击实际是点击的image-file,看似点击在图片上。
网上也有这种方式:
同样有img和file, 将file隐藏,在img上添加click事件, 其中让file执行click方法,也可以实现选择图片, 但是这种方式不能提交到服务器,可能是因为浏览器安全机制。
ps:filter:alpha(opacity:0)是IE的兼容性处理,opacity: 0是CSS3的样式,实现完全透明;
测试代码没有做浏览器兼容性处理(如获得image-file的值),请自测;
欢迎探讨更好的方法。
相关推荐
图片上传插件,可多文件上传和回显,可删除已上传图片,可进行拖拽上传。 springmvc接收传向后台的值方法 @RequestMapping("/admin/addImage.do") public ModelAndView handleRequest(HttpServletRequest request,...
支持多图片回显 与多个文件上传 支持图片删除与回显 原生jquery file上传
NULL 博文链接:https://narutolby.iteye.com/blog/1449908
SpringBoot之图片上传与回显的小Demo,非常适合初学者上手。本人博客也写了关于图片上传与回显的一些细节,大家可以参考。
基于SSM框架的图片(文件)上传并显示到页面,附有数据库
springboot实现上传图片和预览
用spring,springmvc,mybatis实现图片的上传和回显,图片地址在tomcat里面设置
JavaScript 技术: select2控件选择多个数据,以及回显数据的方法 。
图片转base64保存到数据库 , 并回显到浏览器
手机及PC端web多图片上传及回显,可根据实际需求进行代码调整,提供基本的开发思路。 手机及PC端web多图片上传及回显,可根据实际需求进行代码调整,提供基本的开发思路。
vue-element-admin加入多图片上传并回显 vue使用element ui多图片上传加修改回显示例使用模态框
主要介绍了Vue+elementUI实现多图片上传与回显功能(含回显后继续上传或删除),本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
此项目为SSM项目,实现了跨服务器上传图片,并用Ajax技术实现上传图片之后,在页面上立即回显的功能。实现了对商品的修改、查询和删除功能。 图片上传之后保存在ssmImage19项目的upload文件夹中。(上传的资源中包括...
js实现form表单自动回显功能
ajax+ashx完整实现上传图片示例,可回显图片,直接可用,无需调试,包含ashx文件
今天小编就为大家分享一篇解决layui富文本编辑器图片上传无法回显的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
ssm上传图片以及回显图片源代码 自己亲手写的 供参考哦
因此想做图片压缩,但是从网上各种找,都是用到了reader.onload事件,但是怎么调都不走此方法, 各种试,各种不行,后面没办法自己想明白了原理,自己写方法,这里实现了图片的压缩回显以及进行图片内容的回填,...
SSM框架上传图片(单个图片文件的上传和回显(多个回显只需要修改数据类型和jsp代码))
主要介绍了ajax实现文件异步上传并回显文件相关信息功能,结合实例形式分析了基于jQuery $.ajax方法的文件异步上传以及后台java程序对文件信息的读取与显示相关操作技巧,需要的朋友可以参考下