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() 中断读取方法
* */