您的位置：首页 > Web前端 > HTML5

Html5之FileReader接口

2015-11-22 13:10 495 查看

先简单介绍一下

FileReader接口

接口方法

readAsBinaryString 参数： file 二进制码 //将文件以二进制形式进行读入页面

readAsText 参数：file,[encoding] 文本 //将文件以文本形式进行读入页面

readAsDataURL 参数： file 路径 //将文件以Data URL形式进行读入页面

接口事件

abort 中断

onabort 中断

onerror 读取出错

onloadstart 读取开始

onprogress 读取中

onload 读取成功时

onloadend 完成时

创建一个FileReader对象：

[code]var reader = new FileReader();

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

[code]<!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部分：

[code]<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分离，博客中代码只是为了展示，本人并不推崇这类写法，关于此问题，前面博客亦讨论过，在这不作赘述。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航