关于上传文件预览图片的Demo
目的
在选择文件后，出现图片预览效果
初始界面：
效果如下：
思路
- 监听
- 获取文件信息
- FileReader（）对象，初始化文件，输出所需的文件地址
- 添加dom，将处理过的图片地址赋值给src，显示图片
FileReader代码步骤
- 监听文件上传框(onchange)，发生改变时，获取上传文件的信息(dom.files)
<body>
<div id="a1">
<div id="a2">
<input type="file" id="a3" onchange="es(this)">
</div>
</div>
</body>
<script>
let a = document.querySelector("#a1")
let b = document.querySelector("#a2")
let c = document.querySelector("#a3")
function es(_this){
let fileslist = _this.files
console.log(_this.files)
}
</script>
- 用FileReader对象读取需要的文件，并异步转为base64格式
function es(_this){
let fileslist = _this.files
console.log(_this.files)
let reader = new FileReader()
reader.readAsDataURL(fileslist[0])
}
个人理解，使用readAsDataURL()就是相当于将文件与FileReader对象关联在一起，初始化，没有进行readAsDataURL()，则关于FileReader对象的各属性及方法是无效的
使用readAsDataURL()会异步产生一个result，存入实例中（实例中本来是没有的），让我们验证下：
let reader = new FileReader()
console.log("1"+reader.result)
reader.readAsDataURL(fileslist[0])
console.log("2"+reader.result)
reader.onload = function(e){
console.log("3"+reader.result)
}
输出：
所以我们获取result需要在onload()中进行，onload()是在readAsDataURL()后执行的。
- 添加dom，并加入到文档中
let img = new Image()
img.src = reader.result
b.appendChild(img);
FileReader代码demo
function es(_this){
let fileslist = _this.files
let reader = new FileReader()
reader.readAsDataURL(fileslist[0])
reader.onload = function(){
let img = new Image()
img.src = reader.result
b.appendChild(img);
}
}
createObjectURL(obj)实现
obj_url = window.URL.createObjectURL(obj)
方法：调用window.URL.createObjectURL()，传入files，则输出一个图片地址，在添加img dom时赋值给src也可以正常使用~
window.URL.createObjectURL代码实现
...
window.URL = window.URL || window.webkitURL;
const img = document.createElement("img");
img.src = window.URL.createObjectURL(files[0])
b.appendChild(img)