現(xiàn)在的項(xiàng)目中越來越多的會(huì)用到圖片上傳，因此茧跋，今天就和大家討論下圖片上傳預(yù)覽的原理慰丛，也希望能幫到大家。資歷尚淺瘾杭，有問題歡迎留言討論诅病。
本文結(jié)構(gòu)上采用是什么，怎么用粥烁，末尾會(huì)給大家寫上一點(diǎn)實(shí)例便于大家理解贤笆。
1.是什么
FileReader
在html5中，提供了FileReader來讀取本地文件讨阻，使我們可以實(shí)現(xiàn)圖片預(yù)覽功能芥永。
屬性
FileReader.error
讀取文件是出現(xiàn)的DOM錯(cuò)誤，會(huì)返回一個(gè) FileError 對象钝吮。根據(jù)最新的FileAPI草案埋涧，現(xiàn)在的FileReader.error會(huì)返回一個(gè) DOMError 對象
FileReader.readyState
讀取數(shù)據(jù)的狀態(tài)贴唇，有三個(gè)值
EMPTY：沒有數(shù)據(jù)被加載 （0）
LOADING：數(shù)據(jù)正在被加載 （1）
DONE：已完成全部的讀取請求. （2）
FileReader.result
代表數(shù)據(jù)讀取完成后的結(jié)果，只有在數(shù)據(jù)被加載完成后飞袋，result屬性才有效
事件
FileReader.onbort在FileReader的reading操作被中斷的時(shí)候觸發(fā)。
FileReader.onerror在FileReader讀取數(shù)據(jù)過程中發(fā)生錯(cuò)誤時(shí)觸發(fā)
FileReader.onload在FileReader讀取事件完成后調(diào)用
FileReader.onloadstart在FileReader讀取事件開始時(shí)調(diào)用
FileReader.onloadend在FileReader讀事件完成后調(diào)用
FileReader.onprogress在FileReader讀取數(shù)據(jù)的過程中調(diào)用
方法
FileReader.abort()中斷讀數(shù)據(jù)操作链患，直接返回巧鸭，readyState將被設(shè)置為DONE
FileReader.readAsArrayBuffer()讀取Blob類型的數(shù)據(jù)，讀取完成后返回ArrayBuffer對象麻捻，ArrayBuffer對象存儲(chǔ)數(shù)據(jù)內(nèi)容纲仍。
FileReader.readAsBinaryString()讀取一個(gè)Blob對象，將Blob對象中的原始二進(jìn)制數(shù)據(jù)作為字符串的形式返回贸毕。
FileReader.readAsDataURL()返回一個(gè)代表文件數(shù)據(jù)的URL
FileReader.readAsTextString()讀取一個(gè)Blob對象郑叠，返回一個(gè)文本字符串。
OK明棍，下面附上一個(gè)demo乡革。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>上傳實(shí)例</title>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="form-group">
<label for="input">File input</label>
<input type="file" class="form-control" id="input">
</div>
<div class="pic-box">
<img src="">
</div>
</div>
</body>
</html>
上面為HTML代碼
function upload(_this){
var file = _this.files[0];
var input = $("#input");
if(!/image\/\w+/.test(file.type)){
alert("文件必須為圖片！"); //判斷上傳圖片類型
return false;
}
if(!FileReader){
alert("你的瀏覽器不支持H5的FileReader");
input.setAttribute("disabled","disabled");//瀏覽器不支持禁用input type='file'文件上傳標(biāo)簽
return false;
}
//上傳圖片預(yù)覽
var fileReader = new FileReader(); //創(chuàng)建fileReader實(shí)例對象
fileReader.readAsDataURL(file) //讀取上傳對象
fileReader.onload = function(e){ //讀取成功時(shí)進(jìn)行邏輯代碼
var imgSrc = this.result; //result 為上傳成功的圖片base64碼
$('.pic-box img').attr('src',imgSrc);
}
}
上為邏輯代碼摊腋，希望能幫到大家沸版，有什么不足的地方歡迎留言討論，預(yù)祝大家早日成神兴蒸。
