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;
}
}
}
