关于上传文件预览图片的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)