<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>图片预览</title>
<style type="text/css">
.global {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
}
.count {
width: 1000px;
height: 300px;
border: 2px solid deepskyblue;
display: flex;
justify-content: space-around;
align-items: center;
}
.count div{
width: 30%;
height: 50%;
border: 1px solid fuchsia;
display: flex;
justify-content: center;
align-items: center;
}
.count div img{
height: 70%;
}
input {
display: block;
}
</style>
</head>
<body>
<div class="global">
<div class="count">
<div>
<input type="file" name="file" id="file">
<img src="" alt="" id="imgs">
</div>
</div>
</div>
<script type="text/javascript">
// 文件类型转换
// File 转 Base64 图片预览
const fileToBase64 = (file, callback) =>{
const reader = new FileReader()
reader.onload = function(evt){
if(typeof callback === 'function') {
callback(evt.target.result)
} else {
console.log("我是base64:", evt.target.result);
}
}
/* readAsDataURL 方法会读取指定的 Blob 或 File 对象
** 读取操作完成的时候，会触发 onload 事件
* result 属性将包含一个data:URL格式的字符串（base64编码）以表示所读取文件的内容。
*/
reader.readAsDataURL(file);
}
//
let _files = document.getElementById('file')
_files.addEventListener('change',function(e){
console.log(e.target.files[0])
let file = e.target.files[0] // file对象
const base64 = fileToBase64(file,base64 => {
let imgs = document.getElementById('imgs')
imgs.src = base64
})
})
</script>
</body>
</html>
