首先，body里寫入一個(gè)文件輸入框：

然后在JS中獲取到這個(gè)標(biāo)簽，監(jiān)聽它的onchang事件來(lái)讀取文件(以讀取文件路徑為例)：

var inp = document.querySelector("#myFile");

inp.onchange = function () {

//console.log(this.files);

for (var i = 0;i < this.files.length;i++) {

var file = this.files[i];

console.log(file);

var fr = new FileReader();

fr.readAsDataURL(file);

fr.onload = function () {

console.log(this.result);

var img = new Image();

img.src = this.result;

document.body.appendChild(img);

}

}

}

下面一下參數(shù)的含義以及其他的方法：

File 對(duì)象

* lastModified 最后一次修改事件(毫秒數(shù))

* lastModifiedDate 最后一次修改日期

* name 文件名

* type 文件類型

* size 文件大小 *

* */

其他方法:

/**

* FileReader

* 1、構(gòu)建FileReader實(shí)例

* 2、選擇要使用的讀取方式，如：readAsDataURL(),將文件對(duì)象傳遞給該方法

* 3、監(jiān)聽讀取完成事件 onload,通過(guò) this.result 得到讀取結(jié)果

* 4、其他事件監(jiān)聽

*

* 讀取方式:

* readAsDataURL(file) 讀取地址

* readAsText(file[,encoding]) 讀取文本

* readAsBinaryString(file) 以二進(jìn)制讀取

*

* 事件:

* onload 讀取完成

* onloadstart 開始讀取

* onloadend 結(jié)束讀取 無(wú)論成功與否都會(huì)觸發(fā)

* onerror 錯(cuò)誤觸發(fā)

* onabort 中斷讀取時(shí)觸發(fā)

*

* abort() 中斷讀取方法

* */

總結(jié)

以上是生活随笔為你收集整理的html5 获取文件属性,H5新属性--file文件读取的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。