利用html5 file api读取本地文件示例(如图片、PDF等)


Posted in HTML / CSS onMarch 07, 2018

在html4的年代,我们如果要在网页上呈现一张用户本地的图片,需要用户先把图片上传到服务器,再根据服务器提供的图片地址把图片下载下来,才能把图片在网页上呈现出来。这一来二往,起码已经费了两倍于这张图片的流量了,更别说服务器为了存储这张图片所花费的资源以及用户上传错了图片的冤枉成本(因为在html4时代,用户选择好图片后,往往只能看到图片的文件名,而无法通过预览图来进一步确认这张图片是否就是自己想要上传的)。

html5提供了新玩法,光靠浏览器,就可以对本地的(其实也可以是远程的)文件(主要是图片)进行呈现、读取、处理等操作,而这一切,则是通过html5 file api来实现的。
首先是数据结构,html5定义了一个file对象类型来表示文件,每个file对象对应一个文件。file对象有3个属性:name、size、type。name是不包含路径的文件名,size是以字节为单位的文件体积大小,type则是文件的MIME(例如image/jpg)。

file对象不单独存在,而是以数组形式,存在一个名为FileList的数组中。那么,如何拿到这个FileList数组呢?目前,html5有两个途径可以拿到FileList,一是通过file类型的input,二是通过拖放操作的drop事件。
通过file类型的input获取FileList

<input id="file-input" type="file" />

或html5新增的可进行文件多选的multiple属性:

<input id="file-input" type="file" multiple />

一般,我们都是给input:file绑上一个onchange事件,以便在用户选定文件后,马上进行读取文件等下一步操作:

//原生js
var inputElement = document.getElementById("file-input");
inputElement.addEventListener("change", handleFiles, false);
function handleFiles() {
  var fileList = this.files; 
}

//jquery版
$('#file-input').on('change', function() {
    var fileList = this.files;
});

通过拖放操作drop事件

首先要设定一个可供拖放的区域:

<div id="dropbox" style="width: 200px;height: 200px;"></div>

另外,为了能触发drop事件,我们必须阻止dragenter和dragover事件的默认行为:

var dropbox;
dropbox = document.getElementById("dropbox");
dropbox.addEventListener("dragenter", dragenter, false);
dropbox.addEventListener("dragover", dragover, false);
dropbox.addEventListener("drop", drop, false);
function dragenter(e) {
  e.stopPropagation();
  e.preventDefault();
}

function dragover(e) {
  e.stopPropagation();
  e.preventDefault();
}

然后,我们就可以在drop事件的callback中,获取到fileList:

function drop(e) {
  e.stopPropagation();
  e.preventDefault();

  var dt = e.dataTransfer;
  var files = dt.files;

  handleFiles(files);
}

怎么读取或利用file对象呢?

html5提供了两个方案:FileReader和ObjectUrl。

使用FileReader读取file对象

首先需要实例化FileReader对象:

var reader = new FileReader();

利用FileReader读取file对象是一个异步的过程,我们需要先为FileReader设置好load事件的callback,告知FileReader在读取到file对象的数据后应该进行什么进一步的操作:

reader.onload = function(e) { 
    document.getElementById("image").src = e.target.result; 
}

上面这段代码的意思是,FileReader读取到图片的数据后,把数据(DataUrl)放到的src属性里。

最后,就是通过FileReader不同的方法,来决定读取file对象数据后用什么数据格式来存放,并实施读取:

  1. readAsArrayBuffer(file) :读取file对象并存放为ArrayBuffer对象(ArrayBuffer对象是什么我暂时没有搞清,应该是一种为了高效存取数据而产生的数据结构)。
  2. readAsText(file [, 'UTF-8']) :以一般文本模式读取file对象,值得注意的是,利用第二个参数(可选)可指定字符编码。
  3. readAsDataURL(file) :读取file对象并存放为data: URL格式的字符串。

利用ObjectURL

ObjectURL相当于文件的一个临时路径,此临时路径可随时生成、随时释放,在本地浏览器使用起来时,与普通的url无异。

以把一张本地图片显示在页面上为例:

var img = document.createElement("img");
img.src = window.URL.createObjectURL(file);

此时,src形如:blob:http://test.local.com/e03e8bbf-66ce-4fea-a8c8-772f9fdb4d40

用这个src就能让浏览器从本地读取图片。

这种方案相对用FileReader生成图片的base64编码并放到的src里来说,性能有了很大的提升。

比较这两种读取File对象的方案,FileReader适合用来上传文件,而ObjectURL则适合直接在浏览器进行操作,然后操作后再把处理后的数据进行上传,例如利用canvas截图或进行图片压缩等。当然,这一切都是要考虑兼容性的。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
全面总结使用CSS实现水平垂直居中效果的方法
Mar 10 HTML / CSS
css3实现信纸/同学录效果的示例代码
Dec 11 HTML / CSS
CSS3伪类选择器:nth-child()
Apr 02 HTML / CSS
纯CSS3制作的简洁蓝白风格的登录模板(非IE效果更好)
Aug 11 HTML / CSS
利用css3画个同心圆示例代码
Jul 03 HTML / CSS
html Table 表头固定的实现
Jan 22 HTML / CSS
HTML5在canvas中绘制复杂形状附效果截图
Jun 23 HTML / CSS
HTML5实现页面切换激活的PageVisibility API使用初探
May 13 HTML / CSS
HTML5之消息通知的使用(Web Notification)
Oct 30 HTML / CSS
Canvas环形饼图与手势控制的实现代码
Nov 08 HTML / CSS
使用canvas对video视频某一刻截图功能
Sep 25 HTML / CSS
使用CSS实现六边形的图片效果
Aug 05 HTML / CSS
html5 分层屏幕适配的方法
Mar 16 #HTML / CSS
canvas实现图片马赛克的示例代码
Mar 26 #HTML / CSS
HTML5 拖拽批量上传文件的示例代码
Mar 28 #HTML / CSS
利用html5 canvas动态画饼状图的示例代码
Apr 02 #HTML / CSS
简单聊聊H5的pushState与replaceState的用法
Apr 03 #HTML / CSS
如何使用localstorage代替cookie实现跨域共享数据问题
Apr 18 #HTML / CSS
Html5 localStorage入门教程
Apr 26 #HTML / CSS
You might like
常用的php ADODB使用方法集锦
2008/03/25 PHP
献给php初学者(入门学习经验谈)
2010/10/12 PHP
PHP包含文件函数include、include_once、require、require_once区别总结
2014/04/05 PHP
PHP函数func_num_args用法实例分析
2015/12/07 PHP
js实时监听文本框状态的方法
2011/04/26 Javascript
解析js中获得父窗口链接getParent方法以及各种打开窗口的方法
2013/06/19 Javascript
JS判断表单输入是否为空(示例代码)
2013/12/23 Javascript
JavaScript数据类型之基本类型和引用类型的值
2015/04/01 Javascript
jquery中$each()方法的使用指南
2015/04/30 Javascript
JavaScript前端开发之实现二进制读写操作
2015/11/04 Javascript
jQuery Html控件基本操作(日常收集整理)
2016/03/11 Javascript
js实现表单及时验证功能 用户信息立即验证
2016/09/13 Javascript
js 事件的传播机制(实例讲解)
2017/07/20 Javascript
javaScript中的空值和假值
2017/12/18 Javascript
jQuery实现的点击按钮改变样式功能示例
2018/07/21 jQuery
通过实例学习React中事件节流防抖
2019/06/17 Javascript
Python基础知识_浅谈用户交互
2017/05/31 Python
Python正则表达式知识汇总
2017/09/22 Python
基于python 二维数组及画图的实例详解
2018/04/03 Python
Matplotlib 生成不同大小的subplots实例
2018/05/25 Python
python连接PostgreSQL过程解析
2020/02/09 Python
keras实现VGG16 CIFAR10数据集方式
2020/07/07 Python
python利用proxybroker构建爬虫免费IP代理池的实现
2021/02/21 Python
Html5游戏开发之乒乓Ping Pong游戏示例(一)
2013/01/21 HTML / CSS
Staples加拿大官方网站:办公用品一站式采购
2016/09/25 全球购物
将世界上最美丽的摄影作品转化为艺术作品:Photos.com
2017/11/28 全球购物
纽约和芝加哥当天送花:Ode à la Rose
2019/07/05 全球购物
体育教育专业自荐信范文
2013/12/20 职场文书
英语自我评价范文
2014/01/24 职场文书
诚实守信演讲稿
2014/09/01 职场文书
赔偿协议书范本
2014/09/12 职场文书
民政局办理协议离婚(范本)
2014/10/25 职场文书
大学副班长竞选稿
2015/11/21 职场文书
Java实现学生管理系统(IO版)
2022/02/24 Java/Android
抖音动画片,皮皮虾,《治愈系》动画在用这首REMIX作为背景音乐,Anak ,The last world with you完整版
2022/03/16 杂记
PHP RabbitMQ消息列队
2022/05/11 PHP