示例代码:
<!-- multiple 代表选择文件可以多选 -->
<input type="file" name="cover" id="file" multiple>
<div class="thumbnail-waper">
<img class="img-thumbnail" src="" id="fileImg">
</div>
<script type="text/javascript">
// 获取选择文件的控件
var file = document.querySelector('#file')
// 获取显示图片的控件
var fileImg = doucument.querySelector('#fileImg')
// 选择文件
file.onchange = funciton(){
// 创建读取文件内置对象
const reader = new FileReader()
// 读取文件(这是一个异步方法,所以得需要onload中result.reader获取),this.files代表上传文件列表数据
reader.readAsDataURL(this.files[0])
reader.onload = funciton(){
// 文件赋值给显示图片控件
fileImg.src = result.reader
}
}
</script>