在文件上传之前，我们总想预览一下文件内容，或图片样子，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. PHP画图的基本步骤GD库

    一:PHP新建一个图片步骤: :创建画布: $im=imagecreatetruecolor(300,80) 2:定义颜色: $black=imagecolorallocate($im, 0, 0, ...

  2. BonnMotion支持的几种移动模型

    BonnMotion是一款基于java的移动场景产生和分析工具,常用来研究mobile ad hoc network的特征.其产生的移动场景可以导入到几款网络模拟器中进行模拟分析,例如:NS2,NS3 ...

  3. 内存管理-slab[原理]

    前言 主要讲解原理,基于2.6.32版本内核源码.本文整体思路:先由简单内存模型逐渐演进到当下通用服务器面对的内存模型,讨论每一个内存模型下slab设计需要解决的问题. 历史简介 linux内核运行需 ...

  4. Spark架构

    Spark架构    为了更好地理解调度,我们先来鸟瞰一下集群模式下的Spark程序运行架构图. 1. Driver Program        用户编写的Spark程序称为Driver Progr ...

  5. [P2402] 奶牛隐藏

    二分答案+最大流. 对答案建图,若长度≤答案,连边即可.(先要预处理点对间的最短路) 当然得拆点,(否则,就此题而言,就会出现流量x-y不走x-y的最短路边的情况,而是走了一条路径 ,答案约束的仅仅是 ...

  6. js 获取浏览器大小，屏幕大小等。

    转自:“”http://www.cnblogs.com/top5/archive/2009/05/07/1452135.html“”..感谢,万分. 网页可见区域宽:document.body.cli ...

  7. 常用的npm指令总结

    一.安装指令,通常是全局安装 npm install <package name> -g 二.移除全局安装包 npm uninstall <package name> -g 三 ...

  8. AcceptEx与完成端口（IOCP）结合实例

    前言 在windows平台下实现高性能网络服务器,iocp(完成端口)是唯一选择.编写网络服务器面临的问题有:1 快速接收客户端的连接.2 快速收发数据.3 快速处理数据.本文主要解决第一个问题. A ...

  9. #10 Python字符串

    前言 通过上一节可知,Python6个序列的内置类型中,最常见的是列表和元组,但在Python中,最常用的数据类型却不是列表和元组,而是字符串.要想深入了解字符串,必须先掌握字符编码问题.因此本篇博文 ...

  10. 记一次安装Nginx+php-fpm安装后无法解析.php文件，状态码200,但显示空白页

    安装环境: Nginx:Nginx1.12.2 PHP:PHP 7.2 系统:CentOS 7.4 安装方式: Nginx与PHP都是yum安装的,具体步骤: 1.安装epel源再安装Nginx: r ...