参加的项目是一个PC端网站，需要做一个更换头像的功能，要求是显示原先头像，然后点击上传按钮，选择图片后，显示被选中的图片的缩略图。
效果图如下（有点丑，只是为了实现效果，手动滑稽）：
代码如下：
<!DOCTYPE html>
<html>
<head>
<title>1234</title>
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<div id="myAvatar">
<span class="myAvatar">我的头像</span>
<img src="3.jpg" width="100px" height="100px" alt="我的头像">
</div>
<div id="changeAvatar">
<span class="changeAvatar">修改头像</span>
<label>
<input οnchange="previewFile()" style="position:absolute;opacity:0;width: 0px;height: 0px;" type="file" name="file" id="Album_img" accept="image/gif,image/jpeg,image/x-png"/>
<img style="width: 60px;height: 60px;" title="上传文件" src="addAvatar.png">
</label>
<img class="newAvatar" src="" width="100px" height="100px" alt="修改后头像的缩略图" style="opacity: 0;">
<div class="confirmChange">
<input type="submit" name="confirmChange" id="confirmChange" value="确认修改">
</div>
</div>
</body>
<script type="text/javascript">
function previewFile() {
var preview = document.getElementsByTagName('img');
var file = document.querySelector('input[type=file]').files[0];
var reader = new FileReader();
reader.onloadend = function () {
preview[2].src = reader.result;
}
if (file) {
reader.readAsDataURL(file);
$(".newAvatar").css('opacity', '1');
} else {
$(".newAvatar").css('opacity', '0');
preview[2].src = "";
}
}
</script>
</html>
主要有两个问题：
就是上传的图片的地址非常长，，，不是一般的长。为了实现功能，我把对应数据表的字段由varchar改成了text，遇到更好的方法后一定改正这种实现方法。js部分代码应该用的是封装好后的，不能用相应的jq代码去替换
希望可以各位小伙伴一起探讨，有更好的方法，麻烦留言哦，谢谢！
参考链接：https://codepen.io/skura23/pen/aWBGBJ
