美文网首页H5
H5新属性--file文件读取

H5新属性--file文件读取

作者: 丶灰太狼他叔 | 来源:发表于2017-07-17 19:05 被阅读3456次

    首先,body里写入一个文件输入框:

            <!--multiple  允许选择多个文件,添加即为true-->
            <input type="file" name="myFile" id="myFile" value="" multiple="multiple"/>
    

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

    相关文章

      网友评论

        本文标题:H5新属性--file文件读取

        本文链接:https://www.haomeiwen.com/subject/mdeqkxtx.html