首先，body里寫入一個文件輸入框：

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

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 對象

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

* lastModifiedDate 最后一次修改日期

* name 文件名

* type 文件類型

* size 文件大小 *

* */

其他方法:

/**

* FileReader

* 1、構建FileReader實例

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

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

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

*

* 讀取方式:

* readAsDataURL(file) 讀取地址

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

* readAsBinaryString(file) 以二進制讀取

*

* 事件:

* onload 讀取完成

* onloadstart 開始讀取

* onloadend 結束讀取 無論成功與否都會觸發(fā)

* onerror 錯誤觸發(fā)

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

*

* abort() 中斷讀取方法

* */

總結

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

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