近段时间在修改项目上的一个功能时，发现可以用这种方式实现点击图片并提交服务器后回显（这里多亏了我的项目经理），将此方法分享给大家作讨论。
当然为了突出关键代码没有写服务器代码：
<!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的值），请自测；
欢迎探讨更好的方法。
相关推荐
特别是在结合AjaxFileUpload包的情况下，如何实现文件的异步上传，并对EasyUI与AjaxFileUpload的源码进行必要的修改以支持这一功能。以下将详细介绍`filebox`控件的使用方法、注意事项以及具体的代码实现。 #### 二...
在C#编程中，将图片加载到PictureBox控件并将其上传到数据库是一个常见的操作，尤其在开发图形用户界面（GUI）应用时。PictureBox是Windows Forms中的一个组件，用于显示图像，而数据库则常用于持久存储数据，包括...
|--利用FinalHttp实现多线程断点续传 |--加密之MD5 |--动画Animation详解 |--动画之view左右抖动 |--动画之移动动画 |--动画之组合动画 |--动画之缩放动画ScaleAnimation |--反序列化对象 |--发送短信 读天气 调音量...
- **映象文件重载**：通过选择“File”菜单中的“Reload Current Image”选项，可以重新加载映象文件，实现程序的复位。 #### 实验三：基于ADS的C语言程序实验 - **程序启动引导文件**：是C程序的入口点，没有它，...
### 批处理基础知识点详解 #### 一、批处理概念及基本构成 - **定义**：批处理是一种脚本语言，通常用于Windows...通过实践和不断尝试，可以逐步掌握这些命令的高级用法，从而实现对Windows系统的自动化管理和维护。
文件夹拷贝可以通过FileInfo和DirectoryInfo类结合FileStream来实现，也可以使用File类的方法来完成。 解析XML通常使用.NET Framework中的System.Xml或System.Xml.Linq命名空间提供的类和方法。XML是可扩展标记语言...
修改成功,提示请重新登录,自动退出并跳往登录页，保证session失效 （12）访问权限控制: 1.增加过滤器. 登录页面可直接访问. 如果访问不是登录地址,则根据session判断是否登录. 如果已经登录，核心页面直接显示...
12. 控件大小的修改：在编程环境中，除了鼠标和键盘，还可以通过编写代码来调整控件的大小。 13. Word快捷键：Ctrl+Home组合键可以将插入点移动到文档的开头。 14. 构造函数与析构函数调用顺序：派生类构造时先...
5.1 连续滚动的文字，图片（注意是连续的，两段文字和图片中没有空白出现） 5.2 html编辑控件类 5.3 颜色选取框控件 5.4 下拉菜单 5.5 两层或多层次的下拉菜单 5.6 仿IE菜单的按钮。（效果如rongshuxa.com的...