摘要:創(chuàng)建新對象屬性讀取文件時發(fā)生的錯誤表明對象的當(dāng)前狀態(tài)讀取到的文件內(nèi)容,只在讀取操作完成后才有效,數(shù)據(jù)格式取決于采用的讀取操作方法中止該讀取操作。以純文本的形式讀取,中的數(shù)據(jù)為字符串。屬性中將包含一個格式的字符串。讀取文件的二進(jìn)制源碼。
file 提供文件有關(guān)的信息 1. file對象
file對象的來源一般分為3種:
(1)在元素上選擇上傳文件后返回的Filelist對象; (2)由拖放操作產(chǎn)生的DataTransfer對象; (3)HTMLCanvasElement的mozGetAsFile() API;
此處討論的是第一種,獲取file對象:
let file = e.target.files[0];//獲取file 對象,當(dāng)上傳多個文件(圖片)時,0表示第一個
屬性:
lastModified: 1496803445926;//所引用文件最后修改時間 lastModifiedDate: Wed Jun 07 2017 10:44:05 GMT+0800 (CST) {};//所引用文件最后修改時間的 Date 對象 name: "多Y圖.svg";//所引用文件的名字 size: 1384;//返回文件的大小 type: "image/svg+xml";//返回文件的 多用途互聯(lián)網(wǎng)郵件擴(kuò)展類型 webkitRelativePath: "";//返回 File 相關(guān)的 path 或 URL
另,多張圖片的上傳原理類似,需注意以下三點:
1.設(shè)置multiple 2.通過循環(huán)取出每張圖片,放到指定地方 3.每次循環(huán)的時候重新new FileReader()對象2. FileReader()對象
FileReader() 允許web應(yīng)用程序異步讀取存儲在用戶計算機(jī)上的文件(或原始數(shù)據(jù)緩沖區(qū))的內(nèi)容,使用 File 或 Blob 對象指定要讀取的文件或數(shù)據(jù)。
let reader = new FileReader();//創(chuàng)建新對象
屬性:
error: 讀取文件時發(fā)生的錯誤; readyState: 表明FileReader對象的當(dāng)前狀態(tài); result: 讀取到的文件內(nèi)容,只在讀取操作完成后才有效,數(shù)據(jù)格式取決于采用的讀取操作;
方法:
abort(): 中止該讀取操作。
readAsText(file, encoding):以純文本的形式讀取,result中的數(shù)據(jù)為字符串。
readAsDataURL(file):result屬性中將包含一個data:url格式的字符串。
readAsArrayBuffer(file): result屬性中將包含一個ArrayBuffer對象。
readAsBinaryString(file):讀取文件的二進(jìn)制源碼。
事件處理程序
onabort: 當(dāng)讀取操作被中止時調(diào)用
onerror:當(dāng)讀取操作發(fā)生錯誤時調(diào)用
onload: 當(dāng)讀取操作成功完成時調(diào)用
onloadend: 當(dāng)讀取操作完成時(不管成功還是失敗),在onload或者onerror之后調(diào)用
onloadstart: 當(dāng)讀取操作將要開始時調(diào)用
onprogress: 在讀取數(shù)據(jù)過程中周期性調(diào)用
3.示例read
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/84521.html
摘要:最后一次修改文件的時間。選擇文件代碼上傳如圖這時看文字顯示如圖此時我們在獲得對象時,不能用這種方式獲取文件對象了不然只獲取的是對象集合里面的一個對象。 js要操作文件,首先得講到的是文件api里常見的幾個對象: 1,Blob 2,F(xiàn)ile 3,F(xiàn)ileList 4,F(xiàn)ileReader 1.1 Blob對象表示的是二進(jìn)制數(shù)據(jù),提供了一個slice方法,該方法可以訪問到字節(jié)內(nèi)部的數(shù)據(jù)段...
閱讀 2636·2021-10-14 09:47
閱讀 4923·2021-09-22 15:52
閱讀 3358·2019-08-30 15:53
閱讀 1452·2019-08-30 15:44
閱讀 672·2019-08-29 16:41
閱讀 1652·2019-08-29 16:28
閱讀 441·2019-08-29 15:23
閱讀 1624·2019-08-26 12:20