<style>
label {
width: 100px;
height: 100px;
border-radius: 50%;
border: 3px solid red;
display: block;
text-align: center;
line-height: 100px;
font-size: 80px;
}
input[type="file"] {
display: none;
}
</style>
</head>
<body>
<input type="file" id="upload" multiple />
<label for="upload"> + </label>
<img src="" alt="" />
<script>
let mybox = document.querySelector('input[type="file"]');
let img = document.querySelector("img");
mybox.onchange = function () {
// 判断的图片的类型 (jepg/gif/webp)
// 限制图片的大小
console.log(this.files[0]);
// 1.创建一个文件读取器
let fileReader = new FileReader();
// 2.读取文件
fileReader.readAsDataURL(this.files[0]);
// 3.文件读取需要时间
fileReader.onload = function (res) {
console.log(res.target.result);
//4.读取成功之后将base64格式的图片路径赋值给img.src
img.src = res.target.result;
};
};
</script>
487
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
