在文件上传之前，我们总想预览一下文件内容，或图片样子，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. 3-2 模板语法(vue中的内容写法)

    插值表达式.v-text.v-html的用法

  2. 不要再说我简历上Java项目都好low！【offer收割机必备】

    获取精品学习资料私信 欢迎加入QQ群架构华山论剑:836442475(大牛聚集地)一起交流学习探讨! 目录 高级工程师必备:系统设计能力 如何让你的项目更有技术含量 这篇文章我们继续来聊一聊,在系统设 ...

  3. Linux学习笔记之四————Linux常用命令之文件管理

    Linux命令——文件管理相关命令 <1>查看文件信息:ls ls是英文单词list的简写,其功能为列出目录的内容,是用户最常用的命令之一,它类似于DOS下的dir命令. Linux文件或 ...

  4. 在Ubuntu中搭建KMS服务器

    介绍 基于vlmcsd搭建的KMS服务器. 根据github上的说明,这个工具是用C写的,没有任何依赖,可以直接运行.而且它横跨几乎现在所有的系统平台,如Android, FreeBSD, Solar ...

  5. mysql 开发进阶篇系列 41 mysql日志之慢查询日志

    一.概述 慢查询日志记录了所有的超过sql语句( 超时参数long_query_time单位 秒),获得表锁定的时间不算作执行时间.慢日志默认写入到参数datadir(数据目录)指定的路径下.默认文件 ...

  6. docker 安全

    由于容器运行在主机上,且与主机共用一套内核,因此在容器的安全使用上会涉及到容器本身以及主机的安全加固,如针对系统调用,系统资源,远程访问等都需要进行安全方面的考量. docker官网给出了简单的一些建 ...

  7. 【PyTorch深度学习60分钟快速入门 】Part2：Autograd自动化微分

      在PyTorch中,集中于所有神经网络的是autograd包.首先,我们简要地看一下此工具包,然后我们将训练第一个神经网络. autograd包为张量的所有操作提供了自动微分.它是一个运行式定义的 ...

  8. 四、windows下TortoiseGit的使用与操作

    使用 Git命令有时候确实不怎么方便,特别是每次都要输入密码,如果配置 SSH 的方式,又实在是很麻烦.(当然,必须使用 Windows 神器才有方便友好的客户端图形界面啦!!!) 关于 Tortoi ...

  9. spring boot 2.0 源码分析（一）

    在学习spring boot 2.0源码之前,我们先利用spring initializr快速地创建一个基本的简单的示例: 1.先从创建示例中的main函数开始读起: package com.exam ...

  10. RabbitMQ Exchange详解以及Spring中Topic实战

    前言 AMQP,即Advanced Message Queuing Protocol,高级消息队列协议,是应用层协议的一个开放标准,为面向消息的中间件设计.消息中间件主要用于组件之间的解耦. 业务需求 ...