js實現圖片上傳預覽原理

如今網上有不少成熟的圖片上傳的插件，因爲以前對於圖片上傳未接觸過，不瞭解其實現原理。網上查閱了相關資料，瞭解到其是基於FileReader Api。

衆所周知，你們平時作兼容性都是爲了兼容低版本瀏覽器，圖片上傳則偏偏相反。基於瀏覽器的安全策略，file標籤在現代瀏覽器中已經獲取不到真實路徑。偏偏相反，低版本ie卻能獲取到真實物理路徑。因此此功能是基於現代瀏覽器的解決方案。

FileReader就是html5爲咱們提供的讀取文件的api。它的做用就是把文本流按指定格式讀取到緩存，以供js調用。

FileReader有四種讀取文件的方式：

1. readAsBinaryString讀取爲二進制碼

2. readAsDataURL讀取爲 DataURL

3. readAsText讀取爲文本

4. readAsArrayBuffer

基於預覽上傳後圖片的需求，須要將圖片讀取爲DataURL。DataURL有固定格式，例如：data:[文件格式];base64,[文本流base64編碼]。

1. jpg格式:data:image/jpeg;base64,/9j/4...  
2. png格式: data:image/png;base64,iVBORw...
3. gif格式：data:image/gif;base64,R0lGOD..

經過此格式咱們就能夠驗證用戶上傳的圖片類型。下面是本人寫的簡單demo：

html代碼：

　　<input id="files" type="file" onchange="previewImage(this, 'prvid')" multiple="multiple">  

　　<div id="prvid">預覽容器</div>  

js代碼：

　　

function previewImage(file, prvid) {
/* file：file控件
* prvid: 圖片預覽容器
*/
var tip = "Expect jpg or png or gif!"; // 設定提示信息
var filters = {
"jpeg" : "/9j/4",
"gif" : "R0lGOD",
"png" : "iVBORw"
}
var prvbox = document.getElementById(prvid);
prvbox.innerHTML = "";
if (window.FileReader) { // html5方案
for (var i=0, f; f = file.files[i]; i++) {
var fr = new FileReader();
fr.onload = function(e) {
var src = e.target.result;
if (!validateImg(src)) {
alert(tip)
} else {
showPrvImg(src);
}
}
fr.readAsDataURL(f);
}
} else { // 降級處理

if ( !/\.jpg$|\.png$|\.gif$/i.test(file.value) ) { alert(tip); } else { showPrvImg(file.value); } } function validateImg(data) { var pos = data.indexOf(",") + 1; for (var e in filters) { if (data.indexOf(filters[e]) === pos) { return e; } } return null; } function showPrvImg(src) { var img = document.createElement("img"); img.src = src; prvbox.appendChild(img); } }