在文件上传之前，我们总想预览一下文件内容，或图片样子，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. 机器学习基石笔记：08 Noise and Error

    噪声:误标.对同一数据点的标注不一致.数据点信息不准确...... 噪声是针对整个输入空间的. 存在噪声的情况下,VC bound依旧有用: 存在噪声,就是f------>p(y|x),f是p的 ...

  2. 天了噜，Java 8 要停止维护了！

    前些天的中兴事件,已经让国人意识到自己核心技术的不足,这次的 JDK 8 对企业停止免费更新更是雪上加霜.. 以下是 Oracle 官网提示的 JDK8 终止更新公告. 原文内容:Oracle wil ...

  3. C++模板的应用

    需求:类比数组类,只不过数组类型不再是整型.浮点型等,也可以是类. 1.创建模板类 头文件 #ifndef MYVECTOR_H #define MYVECTOR_H #include <ios ...

  4. 当Elasticsearch遇见Kafka

    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由michelmu发表于云+社区专栏 Elasticsearch作为当前主流的全文检索引擎,除了强大的全文检索能力和高扩展性之外,对多种 ...

  5. js常用面试题整理

    1.array操作关键字: pop() 删除最后一个:push最后添加一个或者多个:reverse颠倒数组:shift删除第一个元素:unshift首部添加元素:concat衔接两个数组:join把数 ...

  6. elk + filebeat，6.3.2版本简单搭建，实现我们自己的集中式日志系统

    前言 刚从事开发那段时间不习惯输出日志,认为那是无用功,徒增代码量,总认为自己的代码无懈可击:老大的叮嘱.强调也都视为耳旁风,最终导致的结果是我加班排查问题,花的时间还挺长的,要复现问题.排查问题等, ...

  7. 详细的最新版fastdfs单机版搭建

    前言 目前项目是tomcat单机部署的,图片.视频也是上传到tomcat目录下,关键是此项目的主要内容还就是针对图片.视频的,这让我非常担忧:文件服务器的应用是必然的,而且时间还不会太久.之前一直有听 ...

  8. [牛客小白月赛4 H] 相邻的糖果

    Description 有n个盒子摆成一排,每个盒子内都有ai个糖果. 现在你可以执行以下操作: ·你可以选择任意一个盒子,在选择的盒子内吃掉一个糖果. 对你的要求如下: ·任何m个相邻的盒子内糖果数 ...

  9. js------10种循环方法

    let arr = [{a:1},{a:2},{a:3},{a:4},{a:5}]; // 1.while循环 let sum = 0; let num = 1; while(num <= 1) ...

  10. .NET源码中的链表

    .NET中自带的链表是LinkedList类,并且已经直接实现成了双向循环链表. 其节点类LinkedListNode的数据结构如下,数据项包括指示到某个链表的引用,以及左,右节点和值. public ...