圖片上傳顯示
input標籤type=“file” 支持文件上傳，multiple表示支持多文件同時上傳
<input type="file" multiple>
文件上傳會自動觸發input的onchange事件，
files的內部存儲了上傳文件的屬性
input.οnchange=function(){
console.log(this.files);//this.files存儲了文件的屬性
}
上傳的圖片還需顯示在dom元素中，H5提供了FileReader這個構造函數讓我們讀取本地的文件
讀取TXT文本時需注意，要UTF-8格式文件
具體步驟如下：
var reader=new FileReader() //創建對象
reader.readAsText(文本文件) //讀取文本文件（文本文件需保存UTF-8格式）
reader.readAsDataURL（圖片文件） //讀取圖片文件
reader.οnlοad=function(){ //讀取好之後執行，異步函數
console.log(this.result) //this.result是onload加載後的資源
}
上傳代碼實例代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="file" multiple>
<script>
/*
* files 這個存儲了 上傳文件的集合
*
* */
var input = document.querySelector('input')
//當文件上傳時 會觸發回調函數
input.onchange = function(){
console.log('文件上傳了');
var file = this.files[0]
console.log(file);
//生成一個有讀取文件能力的對象
var reader = new FileReader()
//讀取圖片
reader.readAsDataURL(file)
//等文件讀取對象 讀完了file的數據之後 會觸發onload事件
reader.onload = function(){
console.log('文件讀取完成');
console.log(this.result)
//創建img節點 document.createElement('img')
var oImg = new Image();
oImg.src = this.result ; //異步代碼
oImg.width = 200;
oImg.onload = function(){
document.body.appendChild(this)
}
}
}
</script>
</body>
</html>