JavaSctit如何利用FileReader和濾鏡上傳圖片預(yù)覽功能

小編給大家分享一下JavaSctit如何利用FileReader和濾鏡上傳圖片預(yù)覽功能，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

成都創(chuàng)新互聯(lián)基于分布式IDC數(shù)據(jù)中心構(gòu)建的平臺(tái)為眾多戶提供服務(wù)器機(jī)柜租用 四川大帶寬租用 成都機(jī)柜租用 成都服務(wù)器租用。

FileReader 對(duì)象允許Web應(yīng)用程序異步讀取存儲(chǔ)在用戶計(jì)算機(jī)上的文件（或原始數(shù)據(jù)緩沖區(qū)）的內(nèi)容，使用 File或 Blob對(duì)象指定要讀取的文件或數(shù)據(jù)。

1、FileReader接口的方法

FileReader接口有4個(gè)方法，其中3個(gè)用來讀取文件，另一個(gè)用來中斷讀取。無論讀取成功或失敗，方法并不會(huì)返回讀取結(jié)果，這一結(jié)果存儲(chǔ)在result屬性中。

2、FileReader接口事件

FileReader接口包含了一套完整的事件模型，用于捕獲讀取文件時(shí)的狀態(tài)。

重點(diǎn)介紹下：readAsDataURL

開始讀取指定的Blob對(duì)象或File對(duì)象中的內(nèi)容. 當(dāng)讀取操作完成時(shí),readyState屬性的值會(huì)成為DONE,如果設(shè)置了onloadend事件處理程序,則調(diào)用之.同時(shí),result屬性中將包含一個(gè)data: URL格式的字符串以表示所讀取文件的內(nèi)容這個(gè)方法很有用,

比如,可以實(shí)現(xiàn)圖片的本地預(yù)覽

IE10以下的版本不支持FileReader()構(gòu)造函數(shù).不過可以利用濾鏡來兼容舊版本的IE:兼容IE的圖片本地預(yù)覽.

#imagePreview {
  width: 160px;
  height: 120px;
  float: right;
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);
}