JavaScript FileReader文件讀取處理

2019-08-09 18:13:07 528

FileReader是前端進行文件處理的一個重要的Api,特別是在對圖片的處理上,如果你想知道圖片的處理原理,你就永遠不可能繞過它。

文件處理是一系列的流程,每一步我們都需要知道,自己能做什么,自己做了什么。

第一步,獲取文件

前端中,獲取文件必須使用input標簽。

“<input id="file" type="file"/>”

處理這個文件,必須要用代碼的方式,體現出來,讓你能用代碼操作它。這里主要是使用input標簽的onchange事件。

var file = document.getELementById('file');

file.onchange = function(e){

    var files = e.target.files;

    //這個files就是獲取的file文件的一個數組。之后你可以使用任何方式來操作它。

}

關于file的小知識:前端在讀取到files數組之后,可以對得到的文件一些屬性進行讀取。這些屬性分別是:name、size、type、lastModifiedDate。

一個特別重要的點就是判斷圖片的大小,根據文件的大小進行后續操作。

var file = files[0];//比如這個file是圖片

if(file.size > 5000){

    //處理壓縮操作

}

第二步,讀取文件

1、讀取文件,主要使用的是FileReader類。它提供了幾個方法。

readAsText(file, encoding); 

以純文本形式讀取文件,讀取到的文本保存在result屬性中。第二個參數代表編碼格式。

readAsDataUrl(file); 

讀取文件并且將文件以數據URI的形式保存在result屬性中。

readAsBinaryString(file); 

讀取文件并且把文件以字符串保存在result屬性中。

readAsArrayBuffer(file); 

讀取文件并且將一個包含文件內容的ArrayBuffer保存咋result屬性中。

2、文件讀取的過程是異步操作,在這個過程中提供了三個事件。progress、error、load事件。

progress-每隔50ms左右,會觸發一次progress事件。

error-在無法讀取到文件信息的條件下觸發。

load-在成功加載后就會觸發。

--------------------- 

原文:https://blog.csdn.net/mapbar_front/article/details/78632928 


捉鸡麻将单机版下载 配资服务口碑佳永配资 股票融资公司靠谱认准大牛时代 网上预测的中奖号准吗 南粤26选5开奖结果 山东体彩十一运夺金彩乐乐 甘肃十一选五开奖结果走势图手机版 投资理财知识 看一下吉林省十一选五走势图 腾讯分分彩在线人数开奖结果 华东联销15选五开奖走势图 配资服务口碑佳永配资 股票融资公司靠谱认准大牛时代 网上预测的中奖号准吗 南粤26选5开奖结果 山东体彩十一运夺金彩乐乐 甘肃十一选五开奖结果走势图手机版 投资理财知识 看一下吉林省十一选五走势图 腾讯分分彩在线人数开奖结果 华东联销15选五开奖走势图