前端上傳圖片的原理是：運用input type=“file”的標簽獲取圖片，再使用FileReader這個對象 new 一個實例，通過這個對象的readAsDataURL()方法讀取file標簽獲取的圖片並轉換為base64格式，完成之后通過ajax之類的方式傳到后台。
HTML
需要一個input type="file" 的標簽 如果需要預覽的話可以再加一個img標簽
<div class="warp"> <div class="warp-content">點擊上傳</div> <input type="file" id="file" /> </div> <img src="" />
JS
一、圖片上傳需要檢測上傳的圖片是否變化，所以這里選擇js的onchange事件.先獲取input,img的dom元素,在input type=‘file’的demo元素下，有一個files屬性，里面是我們上傳的文件信息，打印一下，就可以看到上傳文件的名字，類型等信息。
var file = document.getElementById('file'); var image = document.querySelector("img"); file.onchange = function() { var fileData = this.files[0];//這是我們上傳的文件 }
二、然后運用 FileReader 這個對象，FileReader主要用於將文件內容讀入內存，通過一系列異步接口，可以在主線程中訪問本地文件。使用FileReader對象，web應用程序可以異步的讀取存儲在用戶計算機上的文件(或者原始數據緩沖)內容，可以使用File對象或者Blob對象來指定所要處理的文件或數據。這里用到了里面的 readAsDataURL 這個方法，它能把文件用base64格式讀出。
使用方法
var reader = new FileReader(); reader.readAsDataURL(fileData);//異步讀取文件內容，結果用data:url的字符串形式表示 /*當讀取操作成功完成時調用*/ reader.onload = function(e) { console.log(e); //查看對象屬性里面有個result屬性，屬性值，是一大串的base64格式的東西，這個就是我們要的圖片 console.log(this.result);//取得數據 這里的this指向FileReader（）對象的實例reader image.setAttribute("src", this.result)//賦值給img標簽讓它顯示出來 }
FileReader對象的屬性和事件
FileReader對象 官方文檔：https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader
三、第二步操作完成我們就可以上傳圖片的功能了，用戶再使用時我們不能保證用戶上傳的是什么東西，圖片還是視頻，需要判斷一下上傳的文件類型 input type=‘file’的demo元素下，有一個files屬性它里面有文件類型的信息，我們可以通過這屬性來判斷上傳文件類型。（reader.onload里面通過this.result可以獲得圖片的base64格式，把它賦值給一個變量傳到后台，這樣就完成了一個圖片上傳）
var file = document.getElementById('file'); var image = document.querySelector("img"); file.onchange = function() { var fileData = this.files[0];//獲取到一個FileList對象中的第一個文件(File 對象),是我們上傳的文件 var pettern = /^image/; console.info(fileData.type) if (!pettern.test(fileData.type)) { alert("圖片格式不正確"); return; } var reader = new FileReader(); reader.readAsDataURL(fileData);//異步讀取文件內容，結果用data:url的字符串形式表示 /*當讀取操作成功完成時調用*/ reader.onload = function(e) { console.log(e); //查看對象 console.log(this.result);//要的數據 image.setAttribute("src", this.result) } }
全部代碼：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .warp { display: inline-block; vertical-align: bottom; position: relative; } .warp-content { border: 1px solid red; width: 150px; height: 150px; line-height: 150px; text-align: center; } input { position: absolute; top: 0; left: 0; border: 1px solid red; width: 150px; height: 150px; opacity: 0; cursor: pointer; } img { width: 300px; height: 300px; border: 1px solid red; margin-top: 50px; vertical-align: bottom; } </style> </head> <body> <div class="fileBox"> <div class="warp"> <div class="warp-content">點擊上傳</div> <input type="file" id="file" /> </div> <img src="" /> </div> <script type="text/javascript"> var file = document.getElementById('file'); var image = document.querySelector("img"); file.onchange = function() { var fileData = this.files[0];//獲取到一個FileList對象中的第一個文件( File 對象),是我們上傳的文件 var pettern = /^image/; console.info(fileData.type) if (!pettern.test(fileData.type)) { alert("圖片格式不正確"); return; } var reader = new FileReader(); reader.readAsDataURL(fileData);//異步讀取文件內容，結果用data:url的字符串形式表示 /*當讀取操作成功完成時調用*/ reader.onload = function(e) { console.log(e); //查看對象 console.log(this.result);//要的數據 這里的this指向FileReader（）對象的實例reader image.setAttribute("src", this.result) } } </script> </body> </html>