<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="file" id="upload" multiple>
<img src="" alt="" id='upload_img' width="300px">
<script>
const imgUrl = null;
document.querySelector('#upload').onchange = function(e) {
let file = e.target.files[0]
console.log(file)
// way_1:createObjectURL
// 设置前清空老的实现对图片的预览。
// URL.revokeObjectURL(imgUrl);
// imgUrl = URL.createObjectURL(file)
// console.log(imgUrl)
// document.getElementById('upload_img').src = imgUrl
// way_2:readAsDataURL实现对图片的预览。
let fileReader = new FileReader();
console.log('fileReader：', fileReader);
let fr_img_url = fileReader.readAsDataURL(file); //发起异步请求
fileReader.onload = function(e) {
console.log("onload：", fileReader.result);
// document.getElementById('upload_img').src = fileReader.result;
document.getElementById('upload_img').src = e.target.result;
}
// FileReader.readAsDataURL(file)返回值是转化后的超长base64字符串(长度与要解析的文件大小正相关，且大于要解析的文件)，用户选择的图片体积越大，浏览器渲染的压力就越大-异步操纵
// 使用URL.createObjectURL()代替，createObjectURL返回一段带hash的url，可以节省性能并更快速，只不过需要在不使用的情况下手动释放内存=---同步操纵
}
</script>
</body>
</html>
2854
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
