文档章节

html5 filereader读取图像和文本

 秋日童话
发布于 2017/04/27 09:51
字数 291
阅读 13
收藏 0
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery/jquery.js"></script>
</head>
<body>
<script type="text/javascript">
    var result=document.getElementById("result");
    var file=document.getElementById("file");

    //判断浏览器是否支持FileReader接口
    if(typeof FileReader == 'undefined'){
        result.InnerHTML="<p>你的浏览器不支持FileReader接口!</p>";
        //使选择控件不可操作
        file.setAttribute("disabled","disabled");
    }

    function readAsDataURL(){
        //检验是否为图像文件
        var file = document.getElementById("file").files[0];
        if(!/image\/\w+/.test(file.type)){
            alert("看清楚,这个需要图片!");
            return false;
        }
        var reader = new FileReader();
        //将文件以Data URL形式读入页面
        reader.readAsDataURL(file);
        reader.onload=function(e){
            var result=document.getElementById("result");
            //显示文件
            result.innerHTML='<img src="' + e.target.result +'" alt="" />';
        }
    }

    function readAsBinaryString(){
        var file = document.getElementById("file").files[0];
        var reader = new FileReader();
        //将文件以二进制形式读入页面
        reader.readAsBinaryString(file);
        reader.onload=function(f){
            var result=document.getElementById("result");
            //显示文件
            result.innerHTML=this.result;
        }
    }

    function readAsText(){
        var file = document.getElementById("file").files[0];
        var reader = new FileReader();
        //将文件以文本形式读入页面
        reader.readAsText(file);
        reader.onload=function(f){
            var result=document.getElementById("result");
            //显示文件
            result.innerHTML=this.result;
        }
    }
</script>
<p>
    <label>请选择一个文件:</label>
    <input type="file" id="file" />
    <input type="button" value="读取图像" onclick="readAsDataURL()" />
    <input type="button" value="读取二进制数据" onclick="readAsBinaryString()" />
    <input type="button" value="读取文本文件" onclick="readAsText()" />
</p>
<div id="result" name="result"></div>
</body>
</html>

© 著作权归作者所有

共有 人打赏支持
粉丝 2
博文 7
码字总数 2757
作品 0
程序员
HTML5之FileReader的使用

HTML5定义了FileReader作为文件API的重要成员用于读取文件,根据W3C的定义,FileReader接口提供了读取文件的方法和包含读取结果的事件模型。 FileReader的使用方式非常简单,可以按照如下步骤...

文文1
2015/08/06
0
0
Google HTML5训练营:图片旋转墙

六月末,第一次去参加Google的HTML5训练营,估计其他同学多少都接触过。从下午一点到晚上10点,将近9个小时的时间里,首先由杜欢、寒蕊、胡坤做了一些技术上的分享,我对Google工程师寒蕊MM的...

冯尚实
2011/07/15
0
0
javascript 使用Html5 File Api进行文件读取

javascript 使用Html File Api进行文件读取,注意“读取”是只读不写,不可以主动获取浏览器所在主机的文件列表。 Html5 中 FileApi主要有 FileUpload, File,FileList,FileError,Blob,Fil...

IamOkay
2014/11/27
0
0
HTML5定稿一周年,谈谈我与HTML5

原来学习的HTML5&CSS3只是知道了一些Html5独有的标签和CSS3新添加的特性,我以为这就是HTML5了。后来当我和教研主任聊天中发现原来我所学习的方法——利用表格布局原来是几年前的老套路了。后...

devops1024
06/27
0
0
Web 开发中 Blob 与 FileAPI 使用简述

本文节选自 Awesome CheatSheet/DOM CheatSheet,主要是对 DOM 操作中常见的 Blob、File API 相关概念进行简要描述。 Web 开发中 Blob 与 FileAPI 使用简述 Blob 是 JavaScript 中的对象,表...

王下邀月熊
07/22
0
0

没有更多内容

加载失败,请刷新页面

加载更多

70.shell的函数 数组 告警系统需求分析

20.16/20.17 shell中的函数 20.18 shell中的数组 20.19 告警系统需求分析 20.16/20.17 shell中的函数: ~1. 函数就是把一段代码整理到了一个小单元中,并给这个小单元起一个名字,当用到这段...

王鑫linux
今天
2
0
分布式框架spring-session实现session一致性使用问题

前言:项目中使用到spring-session来缓存用户信息,保证服务之间session一致性,但是获取session信息为什么不能再服务层获取? 一、spring-session实现session一致性方式 用户每一次请求都会...

WALK_MAN
今天
5
0
C++ yield()与sleep_for()

C++11 标准库提供了yield()和sleep_for()两个方法。 (1)std::this_thread::yield(): 线程调用该方法时,主动让出CPU,并且不参与CPU的本次调度,从而让其他线程有机会运行。在后续的调度周...

yepanl
今天
4
0
Java并发编程实战(chapter_3)(线程池ThreadPoolExecutor源码分析)

这个系列一直没再写,很多原因,中间经历了换工作,熟悉项目,熟悉新团队等等一系列的事情。并发课题对于Java来说是一个又重要又难的一大块,除非气定神闲、精力满满,否则我本身是不敢随便写...

心中的理想乡
今天
33
0
shell学习之获取用户的输入命令read

在运行脚本的时候,命令行参数是可以传入参数,还有就是在脚本运行过程中需要用户输入参数,比如你想要在脚本运行时问个问题,并等待运行脚本的人来回答。bash shell为此提 供了read命令。 ...

woshixin
今天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部