版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/chenbetter1996/article/details/83834363
效果
实现代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>修改信息</title>
<script>
/**
* 显示选择上传的图片略缩图
* 当选择了图片文件时触发这个方法
*/
function previewFile() {
// 通过标签选择器获取HTML元素
var preview = document.querySelector('img');
var file = document.querySelector('input[type=file]').files[0];
// Js内置文件流
var reader = new FileReader();
// 更新img标签的src属性为图片的本地路径，就可以显示了
reader.onloadend = function () {
preview.src = reader.result;
}
// 图片文件不空就显示
if (file) {
reader.readAsDataURL(file);
} else {
// 图片文件是空的
preview.src = "";
}
}
</script>
</head>
<body>
<h2>修改个人信息</h2>
<form action="/shop/updateUserinfo" enctype="multipart/form-data" method="post">
<table>
<tr>
<td>昵称：</td>
<td><input type="text" name="username"/></td>
</tr>
<tr>
<td>收货手机号:</td>
<td><input type="text" name="contactPhone"/></td>
</tr>
<tr>
<td>收货地址:</td>
<td><input type="text" name="contactAddress"/></td>
</tr>
<tr>
<td>请选择头像:</td>
<td><input type="file" name="image" onchange="previewFile()"/></td>
</tr>
<tr>
<img src="" height="100" width="200" alt="这是略缩图..."/>
</tr>
<tr>
<td><input type="submit" name="submit" value="提交"/></td>
<td><input type="reset" name="reset" value="重置"/></td>
</tr>
</table>
</form>
</body>
</html>
思路和实现都比较简单，即当选择了图片文件时自动触发JS方法修改处理<img>标签的src即可