JavaScript 中的FileReader對象（實現上傳圖片預覽）

最後更新：2017-05-06 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：否則 encoding scala support logs trait 需要簡介 ble

1、FileReader對象簡介

1.檢測瀏覽器對FileReader的支援

if(window.FileReader) {

var fr = new FileReader();

// add your code here

}

else {

alert("Not supported by your browser!");

}

調用FileReader對象的方法

FileReader 的執行個體擁有 4 個方法，其中 3 個用以讀取檔案，另一個用來中斷讀取。下面的表格列出了這些方法以及他們的參數和功能，

需要注意的是，無論讀取成功或失敗，方法並不會返回讀取結果，這一結果儲存在 result屬性中。

方法名	參數	描述
abort	none	中斷讀取
readAsBinaryString	file	將檔案讀取為二進位碼
readAsDataURL	file	將檔案讀取為 DataURL
readAsText	file, [encoding]	將檔案讀取為文本

readAsText：該方法有兩個參數，其中第二個參數是文本的編碼方式，預設值為 UTF-8。這個方法非常容易理解，將檔案以文本方式讀取，讀取的結果即是這個文字檔中的內容。
readAsBinaryString：該方法將檔案讀取為二進位字串，通常我們將它傳送到後端，後端可以通過這段字串隱藏檔。
readAsDataURL：這是例子程式中用到的方法，該方法將檔案讀取為一段以 data: 開頭的字串，這段字串的實質就是 Data URL，Data URL是一種將小檔案直接嵌入文檔的方案。這裡的小檔案通常是指映像與 html 等格式的檔案。（其中base64的方式就是由此來獲得的。。）

2. FileReader處理事件簡介

FileReader 包含了一套完整的事件模型，用於捕獲讀取檔案時的狀態，下面這個表格歸納了這些事件。

事件	描述
onabort	中斷時觸發
onerror	出錯時觸發
onload	檔案讀取成功完成時觸發
onloadend	讀取完成觸發，無論成功或失敗
onloadstart	讀取開始時觸發
onprogress	讀取中

檔案一旦開始讀取，無論成功或失敗，執行個體的 result 屬性都會被填充。如果讀取失敗，則 result 的值為 null ，否則即是讀取的結果，絕大多數的程式都會在成功讀取檔案的時候，抓取這個值。

fr.onload = function() {

this.result;

};

例子1：

<!DOCTYPE html>

<head>

<title>FileReader</title>

</head>

<body>

<p>

<label>請選擇一個檔案：</label>

<inputtype="file" id="file" />

<inputtype="button" value="讀取映像" onclick="readAsDataURL()" />

<inputtype="button" value="讀取位元據" onclick="readAsBinaryString()" />

<inputtype="button" value="讀取文字檔" onclick="readAsText()" />

</p>

</body>

</html>

var result=document.getElementById("result");

var file=document.getElementById("file");

//判斷瀏覽器是否支援FileReader介面

if(typeof FileReader == ‘undefined‘){

result.InnerHTML="<p>你的瀏覽器不支援FileReader介面！</p>";

//使選擇控制項不可操作

file.setAttribute("disabled","disabled");

}

function readAsDataURL(){

//檢驗是否為影像檔

var file = document.getElementById("file").files[0];

if(!/image\/\w+/.test(file.type)){

alert("看清楚，這個需要圖片！");

return false;

}

var reader = new FileReader();

//將檔案以Data URL形式讀入頁面

reader.readAsDataURL(file);

reader.onload=function(e){

varresult=document.getElementById("result");

//顯示檔案

result.innerHTML=‘<imgsrc="‘ + this.result +‘" />‘;

}

function readAsBinaryString(){

var file = document.getElementById("file").files[0];

var reader = new FileReader();

//將檔案以二進位形式讀入頁面

reader.readAsBinaryString(file);

reader.onload=function(f){

varresult=document.getElementById("result");

//顯示檔案

result.innerHTML=this.result;

}

function readAsText(){

var file =document.getElementById("file").files[0];

var reader = new FileReader();

//將檔案以文本形式讀入頁面

reader.readAsText(file);

reader.onload=function(f){

var result=document.getElementById("result");

//顯示檔案

result.innerHTML=this.result;

}

</script>

3 、使用js的FileReader對象實現上傳圖片時的圖片預覽功能

<!DOCTYPE html>

<html>

<head>

　　　　//選擇圖片時預覽功能

　　　　function imageshow(source){

var file =source.files[0];

var imageid = source.id;

if (window.FileReader) {

var fr = new FileReader();

fr.onloadend = function(e){

document.getElementById("portrait"+imageid).src =e.target.result;

};

fr.readAsDataURL(file);

}

document.getElementById("image"+imageid).style.display="none";

document.getElementById("show"+imageid).style.display="block";

　　 }

</script>

</head>

<body>

<div >

<divid="image1" >

<inputtype="file" name="screenshot1" id="1"onchange="imageshow(this)"/>

</div>

　　　　<divid="show1" style="display:none;">

　　　　</div>

　　　　<divid="image2">

<inputtype="file" name="screenshot2" id="2"onchange="imageshow(this)"/>

</div>

　　　</div>

<divid="image3">

<inputtype="file" name="screenshot3" id="3"onchange="imageshow(this)"/>

</div>

　　　　</div>

</body>

</html>

參考原文：http://www.cnblogs.com/faith3/p/6371477.html

JavaScript 中的FileReader對象（實現上傳圖片預覽）

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More