近段时间在修改项目上的一个功能时，发现可以用这种方式实现点击图片并提交服务器后回显（这里多亏了我的项目经理），将此方法分享给大家作讨论。
当然为了突出关键代码没有写服务器代码：
<!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的值），请自测；
欢迎探讨更好的方法。
相关推荐
在IT行业中，图片上传并回显...以上就是实现“图片上传并回显”的关键技术点和流程，实际开发中可能还需要根据具体需求和环境进行调整。通过理解这些知识点，开发者可以构建出高效、安全且用户体验良好的图片上传功能。
图片上传插件，可多文件上传和回显，可删除已上传图片，可进行拖拽上传。 springmvc接收传向后台的值方法 @RequestMapping("/admin/addImage.do") public ModelAndView handleRequest(HttpServletRequest request,...
当用户选择图片并点击上传按钮后，JavaScript会将图片文件作为FormData对象发送到后端，并在成功上传后更新预览图片的`src`属性，从而实现图片的预览。 总结，通过Spring Boot实现图片上传和回显，主要包括以下步骤...
本项目主要涉及"基于SSM框架的图片上传并回显"，这是一个典型的文件上传功能，通常用于用户上传个人头像或者产品图片等，然后在网页上展示出来。下面将详细解析这个知识点： 1. **Spring框架**：Spring作为核心容器...
在SpringBoot框架中，图片上传和回显是常见的功能需求，尤其对于开发涉及用户交互的Web应用时。本文将深入探讨如何实现这个功能，并提供一个简单易懂的实践示例。 首先，我们要理解SpringBoot的核心组件SpringMVC，...
**Ueditor 图片上传与回显配置详解** Ueditor 是一款功能强大的富文本编辑器，广泛应用于各种内容管理系统中。在使用 Ueditor 进行文本编辑时，图片上传、回显以及在线管理功能是非常关键的。本文将详细介绍如何...
JavaScript 技术： select2控件选择多个数据，以及回显数据的方法 。
本示例主要探讨的是如何利用WebUploader实现图片的批量添加、删除以及回显编辑图片的功能，并结合PHP后端进行数据处理。 【核心知识点】 1. **WebUploader组件**：WebUploader是一款基于HTML5 File API的前端文件...
本篇文章将详细讲解如何利用这三个框架实现图片的上传和回显，以及如何在Tomcat服务器中配置图片的存储路径。 首先，我们需要在SpringMVC的配置文件中设置MultipartResolver来支持文件上传。MultipartFile是Spring ...
这个"手机及PC端web多图片上传及回显.rar"压缩包提供的是一种实现这一功能的解决方案，它主要涉及到的技术是`fileinput`，这是一个用于处理文件输入的组件，尤其在多文件选择、预览、上传等方面有着广泛的应用。...
`imgdemo`可能是一个示例程序或者一个包含处理图片的测试脚本，用于演示如何将图片转换为Base64，存储到数据库，然后从数据库中取出并回显到浏览器。 7. **安全性与性能考虑**： 尽管Base64编码方便了图片的存储...
SSM 框架图片上传及回显 SSM 框架图片上传是指在 SSM 框架中实现图片上传功能，以便在 Web 应用程序中上传和展示图片。本文将详细介绍 SSM 框架图片上传的...通过这些步骤，可以在 SSM 框架中实现图片上传和回显功能。
本资源是一个关于如何使用WebUploader实现单例、多例上传图片以及图片回显的演示示例。 在Web开发中，图片上传是一项常见的需求，而WebUploader提供了一套完善的解决方案。首先，我们需要了解WebUploader的基本用法...
在开发过程中，有时我们需要实现多图片上传与回显的功能，尤其是在创建或编辑表单时，用户可能需要上传多张图片，并在页面加载时能够显示出已保存的图片。本文将详细介绍如何使用 Vue 和 Element UI 来实现这一功能...
本篇文章将深入探讨如何使用Java实现图片的异步和同步上传，并讲解如何实现在页面上即时回显。 首先，我们需要理解同步与异步的概念。在编程中，同步操作意味着一个任务执行完毕后才会执行下一个任务，而异步则允许...
本项目"ssm上传图片以及回显图片"主要展示了在SSM框架下如何实现文件上传与图片显示的功能。 首先，我们来理解文件上传的流程。在SSM框架中，通常会使用SpringMVC提供的`@RequestParam`注解来接收前端提交的文件，...
本文将深入探讨如何使用jQuery实现多个图片的上传和回显功能，同时支持图片的删除与回显。 首先，让我们了解“图片上传”这一概念。在Web应用中，用户通常需要上传图片到服务器进行存储或展示。为了实现这个功能，...
在使用layui富文本编辑器进行网页开发时，开发者经常会遇到一个普遍的问题，即上传图片后图片无法在富文本编辑器中正确回显的问题。这个问题困扰了不少开发者，究其原因，主要在于富文本编辑器的图片上传插件对于...
此项目为SSM项目，实现了跨服务器上传图片，并用Ajax技术实现上传图片之后，在页面上立即回显的功能。实现了对商品的修改、查询和删除功能。 图片上传之后保存在ssmImage19项目的upload文件夹中。（上传的资源中包括...