引子
平時做圖片上傳預覽時如果沒有特殊的要求就直接先把圖片傳到后台去，成功之后拿到URL再渲染到頁面上，這樣做在圖片比較小的時候沒什么問題，大一點的話就會比較慢才能看到預覽了，而且還產生了垃圾文件，所以比較好的是上傳之前先在本地預覽一下。
之前做項找插件的時候就知道純前端可以實現圖片本地預覽，可今天面試的時候被問到時竟然一臉懵逼，然后竟然無意中就在電腦桌面發現了實現的demo，然后根據demo查了一下API，稍微總結下：
首先得拿到File對象
當用input標簽上傳圖片時event對象中會包含file對象的一個集合
event.target.files
核心是FileReader對象
- 根據MDN上的說法：
FileReader 對象允許Web應用程序異步讀取存儲在用戶計算機上的文件（或原始數據緩沖區）的內容,使用 File 或 Blob 對象指定要讀取的文件或數據。
- 首先要作為構造函數得到一個FileReader的實例對象
var freader = new FileReader();
- 利用readAsDataURL()方法讀取指定的內容
freader.readAsDataURL(file);
- 最后就是一個事件處理，相當於監控讀取進度，我們這里是當讀取完成時渲染圖片，所以用onload
freader.onload = function(e) {
console.log(e);
myImg.setAttribute('src', e.target.result);
}
- 這里架加載完成之后最終得到的是一個base64編碼的src地址，具體為什么下次查清楚了再專門寫篇關於base64編碼的文章
完整代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<form action="">
<input type="file" name="files" id="fileTog" accept="image/*" multiple="multiple" onchange="changImg(event)">
<img alt="暫無圖片" id="myImg" src="" height="100px" width="100px">
</form>
<script>
function changImg(e){
var myImg = document.getElementById('myImg');
for (var i = 0; i < e.target.files.length; i++) {
var file = e.target.files[i];
console.log(file);
if (!(/^image\/.*$/i.test(file.type))) {
continue; //不是圖片 就跳出這一次循環
}
//實例化FileReader API
var freader = new FileReader();
freader.readAsDataURL(file);
freader.onload = function(e) {
console.log(e);
myImg.setAttribute('src', e.target.result);
}
}
}
</script>
</body>
</html>
后記
通過這件事就暴露了我學習新東西的一個問題，就是查出來看一遍覺得知道了就行了，這種習慣是特別害人的，以后每當有個疑問查出來之后不僅要查是怎么做的，還要了解一下為什么可以這么做，所謂知其然知其所以然。還有就是平時的代碼能用手敲的盡量別復制，復制一時是爽了，可要手寫的時候寫不出來也是聽尷尬的。
今天是來杭州的第三天，面試的第二天，這兩天的面試中暴露出的一個重要問題就是平時太依賴搜索引擎，用腦太少，連一些簡單API就沒記全，前端確實還是有很多東西就是要牢牢記住的，沒什么捷徑可走，這些東西就是基礎，沒記住就是基礎差。雖然你並不影響你做出東西來，但會影響開發效率，技術要往上走，這個基石必須穩，加油記吧！
關於圖片上傳本地預覽的就寫到這里了，如果有什么我理解的不對的地方歡迎大家在評論中指出！