上传图片实时预览
程序员文章站
2022-06-18 18:45:59
...
引入
当使用<input type=file>上传图片文件时，如何在上传到服务器之前，在本地进行预览？
FileReader 对象
FileReader对象允许Web应用程序异步读取用户计算机上的文件。使用new 创建一个FileReader实例对象：
let fileReader = new FileReader();属性
-
error：在读取时发生的错误 -
readyState：fileReader当前状态 -
result：读取到的文件内容，只有在读取操作完成后有效
方法
-
abort()：终止读取操作 -
readAsDateURL()：读取文件中的内容，读取完成后调用onloadend方法，结果result中包含一个data:URL格式的字符串表示文件内容（针对图片就是base64格式的字符串）
事件处理程序
-
onabort：读取被终止时被调用 -
onerror：读取错误时调用 -
onload：读取成功时调用 -
onloadend：读取完成时调用，无论成功失败， 在onload或onerror后调用 -
onloadstart：读取开始前调用 -
onprogress：读取过程中周期调用、
兼容性
使用FileReader对象预览图片
- 在
<input>的onchange事件中获取上传的图片对象 - 使用
<input>的event.target.files获取上传对象的类数组对象，每一项的name属性对应文件名 -
<input>中增加multiple属性，上传多个文件 - 创建
FileReader对象，并通过readAsDateURL()方法，传入要预览的文件对象，在onload回调函数中对FileReader对象的result进行处理
代码：
预览多张图片
<body>
<label><input type="file" id="file" multiple></label>
<div id="preview"></div>
</body>
<script>
'use strict';
let input = document.querySelector('#file'),
wrapper = document.querySelector('#preview');
input.onchange = function (e) {
let files = e.target.files;
Object.keys(files).forEach(function (file) {
let fileReader = new FileReader();
fileReader.readAsDataURL(files[file]);
fileReader.onload = function () {
wrapper.innerHTML += `<img src=${fileReader.result} title=${files[file].name} >`;
}
})
}
</script>