总体分三部分:
第一部分:
用<input >打开手机相册 设置onchange调用ShowImg()函数;
第二部分:
在要显示的位置添加<img/>并设置其宽高。其ID前面尽量一致,方便后面操作;
第三部分:
添加一个全局变量,代表当前的第某张要添加的图片;
添加后对其++;
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
</head>
<body>
<input type="file" id='file'; οnchange="ShowImg()">
<img src="" id='show0' style="width: 200px;height: 100px;">
<img src="" id='show1' style="width: 200px;height: 100px;">
<img src="" id='show2' style="width: 200px;height: 100px;">
</body>
<script>
var ae=0;
function ShowImg() {
if(ae>2){
alert("一次最多同时上传3张");
return false;
}
var r= new FileReader();
f=document.getElementById('file').files[0];
r.readAsDataURL(f);
r.οnlοad=function (e) {
alert(ae+"fe");
document.getElementById('show'+ae).src=this.result;
ae++;
};
}
</script>
</html>
```
向前端出发~~~~~