JS实现预览上传的图片
也是这学期的WEB前端编程课，做答辩项目的时候用带的一个功能。之前是组内小伙伴写的，用了两个函数实现，但这两个函数的内容基本一致。按照编程的思维，应该把它改成可复用的，于是就有了修改后的版本。为了方便阅读，这里也写一下修改原理（注释里也有）。
修改原理其实有点歪门邪道：DisplayPic(this)中的this是指input控件本身，于是我把img的id改成跟input的name相同，这样一来就可以通过获取input的name属性来得到img标签的id，也就可以修改对应img的属性。
效果预览
修改前
<html lang="en">
<head>
<meta charset="utf-8">
<title>JS display picture</title>
</head>
<body>
<div>
<form action="#" method="post" enctype="multipart/form-data">
<p>图片1</p>
<input id="file1" name="file1" type="file" value="选择图片" onchange="DisplayPic1(this)">
<img id="showpic1" src="" alt="" style="display: none; max-width: 600px; max-height: 600px"/><br>
<p>图片2</p>
<input id="file2" name="file" type="file" value="选择图片" onchange="DisplayPic2(this)">
<img id="showpic2" src="" alt="" style="display: none; max-width: 600px; max-height: 600px"/><br>
<input type="submit" value="提交">
<!-- 脚本作用：选择图片之后，显示在页面上-->
<script>
var pic1 = '';
function DisplayPic1(file) {
if (!file.files || !file.files[0]) {
return;
}
var reader = new FileReader();
reader.onload = function (evt) {
document.getElementById('showpic1').style.display = 'block';
document.getElementById('showpic1').src = evt.target.result;
pic1 = evt.target.result;
console.log(pic1)
}
reader.readAsDataURL(file.files[0]);
}
var pic2 = '';
function DisplayPic2(file) {
if (!file.files || !file.files[0]) {
return;
}
var reader = new FileReader();
reader.onload = function (evt) {
document.getElementById('showpic2').style.display = 'block';
document.getElementById('showpic2').src = evt.target.result;
pic2 = evt.target.result;
console.log(pic2)
}
reader.readAsDataURL(file.files[0]);
}
</script>
</form>
</div>
</body>
</html>
修改后
<html lang="en">
<head>
<meta charset="utf-8">
<title>JS display picture</title>
</head>
<body>
<div>
<form action="#" method="post" enctype="multipart/form-data">
<p>图片1</p>
<input id="input_pic1" name="pic1" type="file" value="选择图片" onchange="new DisplayPic(this)">
<img id="pic1" src="" alt="" style="display: none; max-width: 600px; max-height: 600px"/><br>
<p>图片2</p>
<input id="input_pic2" name="pic2" type="file" value="选择图片" onchange="new DisplayPic(this)">
<img id="pic2" src="" alt="" style="display: none; max-width: 600px; max-height: 600px"/><br>
<input type="submit" onclick="" value="提交">
<!-- 脚本作用：选择图片之后，显示在页面上-->
<script>
// 修改原理其实有点歪门邪道：
// DisplayPic(this)中的this是指input控件本身，于是我把img的id改成跟input的name相同
// 这样一来就可以通过获取input的name属性来得到img标签的id，也就可以修改对应img的属性
var pic = '';
function DisplayPic(obj) {
if (!obj.files || !obj.files[0]) {
return;
}
var reader = new FileReader();
var name = obj.name;
reader.onload = function (evt) {
document.getElementById(name).style.display = 'block';
document.getElementById(name).src = evt.target.result;
pic = evt.target.result;
console.log(pic)
}
reader.readAsDataURL(obj.files[0]);
}
</script>
</form>
</div>
</body>
</html>
