html5 获取文件属性,H5新属性--file文件读取

首先，body里写入一个文件输入框：

然后在JS中获取到这个标签，监听它的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);

}

}

}

下面一下参数的含义以及其他的方法：

File 对象

* lastModified 最后一次修改事件(毫秒数)

* lastModifiedDate 最后一次修改日期

* name 文件名

* type 文件类型

* size 文件大小 *

* */

其他方法:

/**

* FileReader

* 1、构建FileReader实例

* 2、选择要使用的读取方式，如：readAsDataURL(),将文件对象传递给该方法

* 3、监听读取完成事件 onload,通过 this.result 得到读取结果

* 4、其他事件监听

*

* 读取方式:

* readAsDataURL(file) 读取地址

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

* readAsBinaryString(file) 以二进制读取

*

* 事件:

* onload 读取完成

* onloadstart 开始读取

* onloadend 结束读取 无论成功与否都会触发

* onerror 错误触发

* onabort 中断读取时触发

*

* abort() 中断读取方法

* */

总结

以上是生活随笔为你收集整理的html5 获取文件属性,H5新属性--file文件读取的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。