HTML5的 File API允许浏览器访问本地文件系统，借助它我们可以实现以前无法实现的本地图片预览功能。

先介绍下该API实现了那些接口：

1.Blob接口，表示原始的二进制数据，通过它可以访问到文件的大小和字节数据

2.File接口，保存着文件的只读属性信息，如文件名，文件类型，文件数据访问的地址。

3.FileList，一个File文件组成的数组，表示用户通过<input type="file" multiple/>选择的文件（multiple表示支持文件多选）

4.FileReader接口，它提供了读取一个文件数据的若干方法和事件

5.FileError、FileException，错误模型

本代码由www.niyuewo.com同城交友网提供

详细接口参考 http://www.w3.org/TR/2009/WD-FileAPI-20091117/

我们知道通过data URI scheme，我们可以直接将图片数据传给img进行显示，而FileReader的readAsDataURL方法正好可以返回这种数据。

下面看代码：

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>html5 example: IMG Preview</title>

</head>

<body>

<div><input id="viewFiles" type="file"/></div>

<img id="viewImg" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAIAAAA

7ljmRAAAAGElEQVQIW2P4DwcMDAxAfBvMAhEQMYgcACEHG8ELxtbPAAAAAElFTkSuQmCC" style="max-width:500px"/>

<script type="text/javascript">

(function () {

    var viewFiles = document.getElementById("viewFiles");

    var viewImg = document.getElementById("viewImg");

    function viewFile (file) {

        //通过file.size可以取得图片大小

        var reader = new FileReader();

        reader.onload = function( evt ){

            viewImg.src = evt.target.result;

        }

        reader.readAsDataURL(file);

    }

    viewFiles.addEventListener("change", function () {

        //通过 this.files 取到 FileList ，这里只有一个

        viewFile(this.files[]);

    }, false);

})();

</script>

</body>

</html>

如何在HTML5 图片预览的更多相关文章

  1. HTML5图片预览 放大

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. HTML5图片预览

    两种方式实现 URL FileReader <!DOCTYPE HTML><html>    <head>    <meta charset="ut ...

  3. html5 图片上传，支持图片预览、压缩、及进度显示，兼容IE6+及标准浏览器

    以前写过上传组件,见 打造 html5 文件上传组件,实现进度显示及拖拽上传,兼容IE6+及其它标准浏览器,对付一般的上传没有问题,不过如果是上传图片,且需要预览的话,就力有不逮了,趁着闲暇时间,给上 ...

  4. HTML5可预览多图片ajax上传(使用formData传递数据)

    HTML5可预览多图片ajax上传(使用formData传递数据) 在介绍上传图片之前,我们简单的来了解下FormData的基本使用:介绍完成后这些基本知识后,我们会在文章最后提供一个demo,就是a ...

  5. HTML5浏览器端图片预览&生成Base64

    本文主要介绍如何通过拖拽方式在浏览器端实现图片预览,并生成图片的Base64编码. 工具链接:图片转Base64. 首先介绍一下FileReader, FileReader对象允许浏览器使用File或 ...

  6. HTML5实现图片预览功能

    两种方式实现 URL FileReader Index.jsp文件 <%@page contentType="text/html" pageEncoding="UT ...

  7. JS魔法堂之实战：纯前端的图片预览

    一.前言 图片上传是一个普通不过的功能,而图片预览就是就是上传功能中必不可少的子功能了.在这之前,我曾经通过订阅input[type=file]元素的onchange事件,一旦更改路径则将图片上传至服 ...

  8. dropzonejs中文翻译手册 DropzoneJS是一个提供文件拖拽上传并且提供图片预览的开源类库.

    http://wxb.github.io/dropzonejs.com.zh-CN/dropzonezh-CN/ 由于项目需要,完成一个web的图片拖拽上传,也就顺便学习和了解了一下前端的比较新的技术 ...

  9. 基于jquery实现的上传图片及图片预览效果代码

    <!DOCTYPE html> <html> <head> <title>HTML5上传图片预览</title> <meta http ...

随机推荐

  1. Microsoft Azure云计算第一步—试用帐户申请

    从本文开始,将会对Microsoft Azure云从Iaas, Paas, Saas三种类型的云应用通过文章进行介绍.千里之行,始于帐户:),如果大家需要申请免费试用帐户请参考本文. 对于直接付钱的壕 ...

  2. 关于dom节点绑定滑动事件导致浏览器上下滑动失效解决方案--黄丕巧

    1.移动端开发往往需要添加一下自定义的左右滑动事件,但是添加了左右滑动事件之后就要阻止浏览器大默认事件,否则dom节点的滑动事件和浏览器本身的滑动会出现冲突,导致滑动的时候会出现消失瞬间再出现的效果 ...

  3. 轻松学习Linux系统安装篇之fdisk命令行工具的使用

    fdisk 的介绍:          fdisk 命令是磁盘分区表操作工具:和以前Dos和windows下的分区工具功能一样:fdsik 能划分磁盘成为若干个区,同时也能为每个分区指定分区的文件系统 ...

  4. Struts ForwardAction Example

    In Struts MVC model, you have to go thought the Action Controller to get a new view page. In some ca ...

  5. 应用dom4j读取xml的例子

    1. 样例xml <?xml version="1.0" encoding="UTF-8"?> <students> <stude ...

  6. SetTimer函数的用法

    什么时候我们需要用到SetTimer函数呢?当你需要每个一段时间执行一件事的的时候就需要使用SetTimer函数 了.使用定时器的方法比较简单,通常告诉WINDOWS一个时间间隔,然后WINDOWS以 ...

  7. 修改Android 程序的icon快捷方式图标和名称

    在res/drawable-hdpi或res/drawable-ldpi或res/drawable-mdpi目录下,加下你要显示的图片,最好后缀是为.png的,然后修改AndroidManifest. ...

  8. wchar_t 和 char 之间转换

    vc++2005以后,Visual studio 编译器默认的字符集为Unicode.VC中很多字符处理默认为宽字符wchar_t,如CString的getBuffer(),而一些具体操作函数的输入却 ...

  9. tomcat如何简单调优

    我们在javaEE开发的过程中,经常会进行tomcat调优操作,下面我们来简单讲解一下tomcat调优. 1) 去掉web.xml的监视,提前将jsp编译成servlet. 2)在物理内存允许的范围内 ...

  10. 解决从内部存储设备安装apk提示Permission Denied

    做应用商店,下载apk,考虑一种情况,如果没有sd卡的情况下就将apk下载到 Internal Cache目录下. 下载都正常,但是在安装的时候提示Permission Denied /data/da ...