- 思路分析
- （1）給input標籤設置一個
onchange事件
- 當input標籤的type屬性爲file時，我們可以給該input標籤設置一個onchange事件來監聽文件選擇的變化
- （1）給input標籤設置一個
- （2）在onchange事件中使用
FileReader讀取選取文件的信息
- FileReader類支持異步讀取input標籤文件信息（大小，時間，數據等）
- （3）使用一個img標籤來顯示獲取的圖片（如果不需要顯示可以設置hidden隱藏）
- 之所以需要這一步，是因爲FileReader無法獲取圖片的大小，它只能得到文件的數據，所以需要將文件數據賦值給img標籤的src屬性
（4）通過img標籤的
offsetHeight和offsetWidth獲取圖片的尺寸效果演示
- 完整代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<form id="form">
<!-- 1.給input標籤添加一個onchange事件：一旦選擇文件發生變化則會觸發 目的：獲取選擇圖片的原始數據 -->
<input type="file" id="exampleInputFile" name="icon" onchange=uploadImg(this)>
<!-- 2.用一個img標籤來接收文件數據 目的：（1）先接收文件數據 （2）通過offsetHeight屬性獲取寬高 -->
<img src="" alt="" id="11111">
<p>請上傳圖片.</p>
</form>
</body>
<script>
//選擇圖片，馬上預覽
function uploadImg(obj) {
//1.讀取文件詳細信息
var file = obj.files[0];
console.log(obj);
console.log(file);
//2.使用FileReader讀取文件信息
var reader = new FileReader();
//4.監聽讀取文件過程方法,異步過程
reader.onloadstart = function (e) {
console.log("開始讀取....");
}
reader.onprogress = function (e) {
console.log("正在讀取中....");
}
reader.onabort = function (e) {
console.log("中斷讀取....");
}
reader.onerror = function (e) {
console.log("讀取異常....");
}
reader.onload = function (e) {
console.log("成功讀取....");
console.log(this.reault);
//或者 img.src = this.result; //e.target == this
var img = document.getElementById("11111");
//將解析的base64字符串賦值給img標籤
img.src = e.target.result;
//5.這裏需要異步獲取，避免線程延遲
setTimeout(function(){
window.alert('高度' + img.offsetHeight + '寬度' + img.offsetWidth);
},1000);
}
//3.開始讀取
reader.readAsDataURL(file)
}
</script>
</html>