在文件上传之前，我们总想预览一下文件内容，或图片样子，html5 中FileReader正好提供了2种方法，可以在不上传文件的情况下，预览文件内容。

图片预览：readAsDataURL(file);

文件预览：readAsText();（必须保证文件编码格式与代码编码格式相同，预览中文才不会乱码）

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>HTML5练习</title>

  <style type="text/css">

  </style>

</head>

<body>

    <input type = file id = 'file'/>

    <input type = button onclick = 'readImg()' value = '读取图像'/>

    <input type = button onclick = 'readFile()' value = '读取文件'/>

    <div id = 'result'></div>

    <script language = 'javascript'>

      function showFileName(){

        var files = document.getElementById('file').files;

        var file;

        for(var i = 0, len = files.length; i < len; i++){

          file = files[i];

          console.log(file.name);

        }

      }

      function readImg(){

        var file = document.getElementById('file').files[0];

        if(!/image\/\w+/.test(file.type)){

          alert("请确保文件为图像类型！");

          return false;

        }

        var reader = new FileReader();

        reader.readAsDataURL(file);

        reader.onload = function(e){

          var result = document.getElementById('result');

          result.innerHTML = "<img src = '"+this.result+"' alt = ''/>";

        };

      }

      function readFile(){

        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>

</body>

</html>

HTML5文件API之FileReader的更多相关文章

  1. HTML5 文件API（一）

    1.FileList对象与File对象 2.文件API之Bolb对象 A Blob object represents a file-like object of immutable, raw dat ...

  2. 用html5文件api实现移动端图片上传&预览效果

    想要用h5在移动端实现图片上传&预览效果,首先要了解html5的文件api相关知识(所有api只列举本功能所需): 1.Blob对象  Blob表示原始二进制数据,Html5的file对象就继 ...

  3. HTML5文件API

    File对象与File对象 Blob对象 FileReader对象 File对象 <!DOCTYPE html> <html> <head> <meta ht ...

  4. HTML5 文件API（二）

    1.FileSystem概述及浏览器检 2.申请磁盘配额 3.创建文件

  5. HTML5 文件API

    filelist 表示文件对象的列表. <form name="upload"> <input type="file" name=" ...

  6. Resumable.js – 基于 HTML5 File API 的文件上传

    Resumable.js 是一个 JavaScript 库,通过 HTML5 文件 API 提供,稳定和可恢复的批量上传功能.在上传大文件的时候通过每个文件分割成小块,每块在上传失败的时候,上传会不断 ...

  7. HTML5权威指南--标签新变化,文件API,拖放API(简要学习笔记一)

    1.标签元素更加语义化   2.内容类型仍然为“text/html”    扩展符仍然为html或者htm.    <1>DOCTYPE 声明<!DOCTYPE html>就可 ...

  8. HTML5 File API — 让前端操作文件变的可能

    前言 在 HTML5 File API 出现之前,前端对于文件的操作是非常有局限性的,大多需要配合后端实现.出于安全角度考虑,从本地上传文件时,代码不可能获取文件在用户本地的地址,所以纯前端不可能完成 ...

  9. [转]人人网首页拖拽上传详解(HTML5 Drag&Drop、FileReader API、formdata)

    人人网首页拖拽上传详解(HTML5 Drag&Drop.FileReader API.formdata) 2011年12月11日 | 彬Go 上一篇:给力的 Google HTML5 训练营( ...

随机推荐

  1. centos7 安装oracle11g

    创建数据库的系统用户和用户组 $ su root #切换到root # groupadd oinstall #创建用户组oinstall # groupadd dba #创建用户组dba # user ...

  2. [EXP]Drupal < 8.5.11 / < 8.6.10 - RESTful Web Services unserialize() Remote Command Execution (Metasploit)

    ## # This module requires Metasploit: https://metasploit.com/download # Current source: https://gith ...

  3. Studying

    美团spark实践:http://tech.meituan.com/spark-in-meituan.html CDH5.6.0-HBase1.0.0:http://archive.cloudera. ...

  4. SSM整合（四）-整合后配置文件汇总

    1.新建Maven项目创建pom.xml pom.xml内容如下 <project xmlns="http://maven.apache.org/POM/4.0.0" xml ...

  5. 从零开始学 Web 之 DOM（七）事件冒泡

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... +-------------------------------------------------------- ...

  6. TCP/IP 笔记 - 广播和本地组播

    在之前第二章介绍IP寻址的时候有介绍到,IP地址有4种:单播.组播.广播.任播. 单播,客户端与服务器之间点到点连接通信: 组播,在发送者和多个接收者(如某个特定的分组)之间实现点对多点的连接通信: ...

  7. PowerDesigner版本控制器设置权限

    PowerDesigner版本控制权限之前一直在Groups里面设置,一直没有效果,原因终于找出来了,PowerDesigner是要对每个库单独赋权限的,步骤如下: 连接上版本控制,在左侧菜单 Obj ...

  8. CSS Font文字样式

    font-style: /* 文字样式 italic(倾斜) | normal */ font-weight: /* 文字是否加粗 bold | normal(正常) */ font-size: /* ...

  9. Java设计模式学习记录-装饰模式

    前言 装饰模式也是一种结构型模式,主要是目的是相对于类与类之间的继承关系来说,使用装饰模式可以降低耦合度.JDK中有不少地方都使用到了装饰模式,例如Java的各种I/O流,javax.swing包中一 ...

  10. Python 3 进阶 —— 使用 PyMySQL 操作 MySQL

    PyMySQL 是一个纯 Python 实现的 MySQL 客户端操作库,支持事务.存储过程.批量执行等. PyMySQL 遵循 Python 数据库 API v2.0 规范,并包含了 pure-Py ...