javascript实现文件上传之前的预览功能
- 2020 年 11 月 24 日
- 筆記
1.首先要给上传文件表单控件和图片控件设置name属性
<div class=”form-group”>
<label for=”exampleInputFile”>文章封面</label>
<input type=”file” name=”cover” id=”file” >
<!– multiple可以选择多个文件 –>
<div class=”thumbnail-waper”>
<img class=”img-thumbnail” src=”” id=”preview” name=”img”>
</div>
</div>
2.在内容底部加入script标签，并获取上传文件表单和图片控件
var file = document.querySelector(‘#file’);
var preview = document.querySelector(‘#img’);
3.为上传文件表单添加onchange事件
file.onchange = function () {
}
4.创建文件读取对象
file.onchange = fucntion ()
{
var reader = new FileReader();
}
5.读取文件
file.onchange = function () {
var reader = new FileReader();
reader.readAsDataURL(this.files[0];
}
6.读取完成后展示到页面，使用onload事件
file.onchange = function () {
var reader= new FileReader();
reader.readAsDataURL(this.files[0];
reader.onload = function () {
preview.src = reader.result;
}
}
}
