您当前位置:首页 > 文章中心 > HTML5+CSS3 > HTML5

html5 FileReader接口

稿件来源: 互联网   撰稿作者: 太阳光   发表日期: 2013-10-14   阅读次数: 248   查看权限: 游客查看

根据W3C定义,FileReader 接口是:"提供一些读取文件的方法与一个包含读取结果的事件模型"。

1. 能力检测与创建实例

检测一个浏览器是否支持 FileReader 很容易做到,支持这一接口的浏览器有一个位于 window 对象下的 FileReader 构造函数,如果浏览器有这个构造函数,那么就可以 new 一个 FileReader 的实例来使用。

    if (typeof FileReader === 'undefined') {
        alert(" 您的浏览器未实现 FileReader 接口 ");
    } else {
        var reader = new FileReader();
        // do sth.
    }

2. 方法

FileReader 的实例拥有 4 个方法,其中 3 个用以读取文件,另一个用来中断读取。下面的表格列出了这些方法以及他们的参数和功能,需要注意的是 ,无论读取成功或失败,方法并不会返回读取结果,这一结果存储在 result属性中。

方法名 参数 描述
abort none 中断读取
readAsBinaryString file 将文件读取为二进制码
readAsDataURL file 将文件读取为 DataURL
readAsText file, [encoding] 将文件读取为文本

readAsText: 该方法有两个参数,其中第二个参数是文本的编码方式,默认值为 UTF-8。这个方法非常容易理解,将文件以文本方式读取,读取的结果即是这个文本文件中的内容。
readAsBinaryString: 它将文件读取为二进制字符串,通常我们将它传送到后端,后端可以通过这段字符串存储文件。
readAsDataURL: 这是例子程序中用到的方法,该方法将文件读取为一段以 data: 开头的字符串,这段字符串的实质就是 Data URI,Data URI是一种将小文件直接嵌入文档的方案。这里的小文件通常是指图像与 html 等格式的文件。

3. 事件

FileReader 包含了一套完整的事件模型,用于捕获读取文件时的状态,下面这个表格归纳了这些事件。

事件 描述
onabort 中断时触发
onerror 出错时触发
onload 文件读取成功完成时触发
onloadend 读取完成触发,无论成功或失败
onloadstart 读取开始时触发
onprogress 读取中

文件一旦开始读取,无论成功或失败,实例的 result 属性都会被填充。如果读取失败,则 result 的值为 null ,否则即是读取的结果,绝大多数的程序都会在成功读取文件的时候,抓取这个值。

4. 实例一

了解了这些知识过后,我们来还原之前的示例。第一步,创建 html 部分,主要包括一个 input 和一个用来呈现结果的 div:

<label>请选择一个图像文件:</label>
<input type="file" id="input" />
<div id="result"></div>
<script type="text/javascript">
    var result = document.getElementById("result");
    var input = document.getElementById("input");
    if(typeof FileReader === 'undefined'){
        result.innerHTML = "<p class='warn'>抱歉,你的浏览器不支持 FileReader</p>";
        input.setAttribute('disabled','disabled');
    }else{
        input.addEventListener('change',readFile,false);
    }
    function readFile(){
        var file = this.files[0];
        if(!/image\/\w+/.test(file.type)){
            alert("请确保文件为图像类型");
            return false;
        }
        var reader = new FileReader();
        reader.onload = function(e){
            result.innerHTML = '<img src="'+this.result+'" alt=""/>'
        };
        reader.readAsDataURL(file);
    }
</script>

4. 实例二

拖动本地多张图片到网页上显示:

<script type="text/javascript">
    function imagesSelected(e) {
        if (typeof FileReader === 'undefined') {
            alert("抱歉,你的浏览器不支持 FileReader");
        } else {
            var myFiles = e.dataTransfer.files;//获取所有文件集合
            for (var i = 0, l = myFiles.length; i < l; i++) {
                var f = myFiles[i];//获取其中一个文件
                if (/^image\//.test(f.type)) { //判断是不是图片
                    var imageReader = new FileReader();
                    imageReader.onload = (function (aFile) {         //文件读取成功完成时触发
                        return function (e) {
                            var img = document.createElement('img');
                            img.title = aFile.name;
                            img.src = e.target.result;
                            document.getElementById('thumbs').insertBefore(img, null);
                        }
                    })(f);
                    imageReader.readAsDataURL(f);//将文件读取为 DataURL
                }
            }
        }
        e.stopPropagation();//阻止事件冒泡
        e.preventDefault();//阻止默认动作
    }
</script>
<div ondragenter="return false" ondragover="return false" ondrop="imagesSelected(event)"
     style="width:300px;height:300px;border: 1px solid red">
    <output id="thumbs"></output>
</div>
拖动多张本地图片放到上面红框内试试,必须在支持HTML5浏览器下哟!

演示效果:

 

拖动多张本地图片放到上面红框内试试,必须在支持HTML5浏览器下哟!

关键词: html5,filereader,上传控件   编辑时间: 2013-10-14 11:01:24

  • 感到高兴

    0

    高兴
  • 感到支持

    0

    支持
  • 感到搞笑

    1

    搞笑
  • 感到不解

    0

    不解
  • 感到谎言

    0

    谎言
  • 感到枪稿

    0

    枪稿
  • 感到震惊

    0

    震惊
  • 感到无奈

    0

    无奈
  • 感到无聊

    0

    无聊
  • 感到反对

    0

    反对
  • 感到愤怒

    0

    愤怒
0%(0)
0%(0)
共有0 条评论 发言请遵守【相关规定

网友评论

会员头像
发 表同步腾讯微博    验证码:  点击更新请先登陆
  • 暂无评论
关闭模块文章图片 article Pictrue
  • 我的妈妈爸爸
  • 基于koa2+mysql+vue2.0+Element阳光内容管理系统
  • 代码覆盖率工具 Istanbul 入门教程
  • 全栈工程师的武器——MEAN
  • 9款超炫的 CSS3 复选框(Checkbox)
  • 微信开发在线翻译功能
  • CSS3那些不为人知的高级属性
  • 给easyui的datebox添加清空事件
  • flash写字效果
  • kendoUI系列教程之DropDownList下拉菜单
  • kendoUI系列教程之datetimepicker日期时间选择
  • kendoUI系列教程之datepicker日期选择
  • kendoUI系列教程之combobox下拉列表框
  • kendoUI系列教程之colorpicker
  • kendoUI系列教程之calendar日历表
  • kendoUI系列教程之autocomplete自动补齐