1.上传图片INPUT标签样式
一般input标签样式不好调整，样式呆板，那么可以使用一些CSS样式来对其样式进行调整，在达到想要效果的同时，样式也更加美观。一般是将该input标签放在a标签中，再来调整其css样式。
css样式
#imgStylebutton{
height: 20px;
width: 80px;
line-height: 35px;
background-color: #6495ED;
color: #ffffff;
padding: 4px 10px;
font-size: 16px;
border-radius: 5px;
text-decoration: none;
}
#uploadImg{
position: absolute;
overflow: hidden;
left:608px;
opacity: 0;
}
html标签
<form action="" method="post" enctype="multipart/form-data">
<table>
<tr>
<td id="imgStyle"><img id="img" src="images/text01.jpg"></td>
</tr>
<tr>
<td height="50px" width="300px" align="center">
<a href="javascript:" id="imgStylebutton" >更换图片
<input type="file" id="uploadImg" name="uploudImg" accept="image/*">
</a>
</td>
</tr>
</table>
</form>
2.JS图片更换显示
更换图片后，回显至当前页面
js代码
<script>
/*图片回显*/
//在uploadImg元素上绑定change事件处理函数function
$("#uploadImg").on("change",function(){
//1.获取该图片对象
var file = this.files[0];
//2.创建FileReader对象
var reader = new FileReader();
//3.异步读取文件内容，结果用data:url的字符串形式表示
reader.readAsDataURL(file);
//4.当读取操作成功完成时调用onload
reader.οnlοad=function(e){
//e.target.result图片地址
//5.将img中src地址换成e.target.result
$("#img").attr("src",e.target.result);
}
})
</script>
3.实现效果
 
| 
转播
