Html5之FileReader接口

来源：互联网发布：steam 在mac上打不开编辑：程序博客网时间：2024/05/20 07:37

先简单介绍一下
FileReader接口
接口方法
readAsBinaryString 参数： file 二进制码 //将文件以二进制形式进行读入页面
readAsText 参数：file,[encoding] 文本 //将文件以文本形式进行读入页面
readAsDataURL 参数： file 路径 //将文件以Data URL形式进行读入页面

接口事件
abort 中断
onabort 中断
onerror 读取出错
onloadstart 读取开始
onprogress 读取中
onload 读取成功时
onloadend 完成时

创建一个FileReader对象：

var reader = new FileReader();

对于FileReader接口方法，依旧以简单粗暴的方式展示，代码如下：

<!doctype html><html lang="en">    <head>        <meta charset="UTF-8">        <meta name="Generator" content="EditPlus®">        <meta name="Author" content="Yvette Lau">        <meta name="Keywords" content="关键字">        <meta name="Description" content="描述">        <title>Document</title>        <style>            *{                margin:0px;                padding:0px;            }            .content{                background-color:rgba(87,255,87,0.6);                padding:40px;                width:600px;                border-radius:10px;                margin:20px auto;                /*禁止选中文本*/                -webkit-user-select:none;                -ms-user-select:none;                -moz-user-select:none;                user-select:none;            }            input[type='file']{                outline:none;            }            input[type='button']{                border-radius:10px;                height:50px;                width:80px;                background-color:pink;                outline:none;                cursor:pointer;            }            input[type='button']:hover{                font-weight:600;            }            #details{                /* display:none; */                width:600px;            }        </style>    </head>    <body>        <div class = "content">            <input type = "file" id = "file"/>            <input type = "button" id = "getBinary" name = "binary" value = "读取二进制" />            <input type = "button" id = "getText" name = "text" value = "读取文本" />            <input type = "button" id = "getData" name = "data" value = "读取图片" />        </div>        <div class = "content" id = "details">        </div>    </body></html>

JS部分：

<script type = "text/javascript">    window.onload = function(){        var getBinary = document.getElementById("getBinary");        var getText = document.getElementById("getText");        var getData = document.getElementById("getData");        var details = document.getElementById("details");        getBinary.onclick = function(){                     var fileList = document.getElementById("file").files;            read(fileList, "readAsBinaryString", details);        };        getText.onclick = function(){            var fileList = document.getElementById("file").files;            read(fileList, "readAsText", details);        }        getData.onclick = function(){            var fileList = document.getElementById("file").files;            read(fileList, "readAsDataURL", details);        }        function read(fileList, readType, dest){            if(fileList.length == 0){                alert("您未选择任何文件！");            }else if(typeof FileReader == undefined){                alert("你的浏览器不支持读取文件，请使用新版本！");            }else{                var reader = new FileReader();                if(readType == "readAsText"){                    reader.readAsText(fileList[0],{encoding: 'utf8'});                }else{                                                      reader[readType](fileList[0]);                }                reader.onload = function(){                    if(readType == "readAsDataURL"){                        if(!/image\/\w+/.test(fileList[0].type)){                            alert("你选择的不是图片文件！");                        }else{                            if(dest.currentStyle){//IE9以下                                var width = dest.currentStyle['width'];                            }else{                                //window.getComputedStyle("元素", "伪类");如果不是伪类，在Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1) 之前，第二个参数“伪类”是必需的（如果不是伪类，设置为null），现在已经不是必需参数，可以省略                                var width = window.getComputedStyle(dest,null)['width'];                            }                            dest.innerHTML = "<img src = '"+this.result+"' width = '"+ width +"' alt = '?' />";                        }                                           }else{                        dest.innerHTML = this.result;                    }                    dest.style.display = "block";                }            }        }    }</script>

在写JS部分代码时，遇到一个问题，读取图片时，为了将图片放于div中，想要获取div的宽度，大约是许久未使用JS的原生方法去获取，竟花费了一些时间，今天早上起床后，又研究了一番关于样式的获取。

以上代码的运行效果如下：
这里写图片描述

本人博客中贴出的代码，都可以直接复制粘贴到您自己的浏览器中，为了方便运行查看，没有使用JQuery或者是路径。
将html部分和js部分拷贝至同一html文件中即可。
对于代码，最好还是JS与html分离，博客中代码只是为了展示，本人并不推崇这类写法，关于此问题，前面博客亦讨论过，在这不作赘述。

1 0