如何在HTML5 图片预览
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 图片预览的更多相关文章
- HTML5图片预览 放大
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- HTML5图片预览
两种方式实现 URL FileReader <!DOCTYPE HTML><html> <head> <meta charset="ut ...
- html5 图片上传，支持图片预览、压缩、及进度显示，兼容IE6+及标准浏览器
以前写过上传组件,见 打造 html5 文件上传组件,实现进度显示及拖拽上传,兼容IE6+及其它标准浏览器,对付一般的上传没有问题,不过如果是上传图片,且需要预览的话,就力有不逮了,趁着闲暇时间,给上 ...
- HTML5可预览多图片ajax上传(使用formData传递数据)
HTML5可预览多图片ajax上传(使用formData传递数据) 在介绍上传图片之前,我们简单的来了解下FormData的基本使用:介绍完成后这些基本知识后,我们会在文章最后提供一个demo,就是a ...
- HTML5浏览器端图片预览&生成Base64
本文主要介绍如何通过拖拽方式在浏览器端实现图片预览,并生成图片的Base64编码. 工具链接:图片转Base64. 首先介绍一下FileReader, FileReader对象允许浏览器使用File或 ...
- HTML5实现图片预览功能
两种方式实现 URL FileReader Index.jsp文件 <%@page contentType="text/html" pageEncoding="UT ...
- JS魔法堂之实战：纯前端的图片预览
一.前言 图片上传是一个普通不过的功能,而图片预览就是就是上传功能中必不可少的子功能了.在这之前,我曾经通过订阅input[type=file]元素的onchange事件,一旦更改路径则将图片上传至服 ...
- dropzonejs中文翻译手册 DropzoneJS是一个提供文件拖拽上传并且提供图片预览的开源类库.
http://wxb.github.io/dropzonejs.com.zh-CN/dropzonezh-CN/ 由于项目需要,完成一个web的图片拖拽上传,也就顺便学习和了解了一下前端的比较新的技术 ...
- 基于jquery实现的上传图片及图片预览效果代码
<!DOCTYPE html> <html> <head> <title>HTML5上传图片预览</title> <meta http ...
随机推荐
- java多线程之synchronized(线程同步)
一.线程同步,主要应用synchronized关键字: public class TraditionalThreadSynchorinzed { public static void main(Str ...
- 远程连接mongodb出现 no route to host 和 Connection refused
部署好mongodb服务器后,在客户端安装好php的mongodb扩展,用程序连接mongodb服务器出错:no route to host.搜索了差不多一天的时候都没有相关的解决方法.最后在mong ...
- NServiceBus教程-持久化
NServiceBus的各种特性需要持久性.其中有超时.传奇和订阅存储. 四个持久化技术在NServiceBus在使用: RavenDB nHibernate 内存中 MSMQ 读到安装Raven D ...
- 《Java数据结构与算法》笔记-CH5-链表-3双端链表
/** * 双端链表的实现 */ class LinkA { public long dData; public LinkA next; public LinkA(long d) { dData = ...
- ipython, 一个 python 的交互式 shell，比默认的python shell 好用得多，支持变量自动补全，自动缩进，支持 bash shell 命令，内置了许多很有用的功能和函数
一个 python 的交互式 shell,比默认的python shell 好用得多,支持变量自动补全,自动缩进,支持 bash shell 命令,内置了许多很有用的功能和函数. 若用的是fish s ...
- 深入浅出谈存储:如何区别NAS、SAN与DAS
深入浅出谈存储:如何区别NAS.SAN与DAS 2012年02月17日16:51 来源:新浪博客 作者:林沛满 编辑:曾智强 查看全文 赞(0)评论(1) 分享 标签: DAS , SAN , 存储系 ...
- 理解Python元类（转）
add by zhj:先收藏了,有时间看,图倒是不少,可以配合stackover flow上那篇文章一起看 原文:http://blog.ionelmc.ro/2015/02/09/understan ...
- 检测iOS的APP性能的一些方法
首先如果遇到应用卡顿或者因为内存占用过多时一般使用Instruments里的来进行检测.但对于复杂情况可能就需要用到子线程监控主线程的方式来了,下面我对这些方法做些介绍: Time Profiler ...
- HDU4289Control(最大流)
看了这道题,然后重新开始练习自己的刚敲不久的网络流,发现还是难以一遍敲得完整啊,,,,, 调了...遍,改了...遍,测了...遍,交了,,,遍,总算是A了,,不简单啊 然后试着用了其他两种算法EK和 ...
- MySQL重置密码（OSX）
1.停止MySQL的服务 sudo /Library/StartupItems/MySQLCOM/MySQLCOM stop 2.cd /usr/local/mysql/bin ./mysqld_ ...