HTML5 File接口在web页面上使用文件下载


Posted in HTML / CSS onFebruary 27, 2017

File接口提供了与文件相关的信息,并且运行JavaScript在web页面上去访问文件中的内容。

File对象来自于用户使用input标签选择文件返回的FileList对象,来自于拖放操作的DataTransfer对象。File对象是一种特殊的Blob,它能够在任何能够使用Blob的上下文中使用。

要在web页面中使用文件,通常需要涉及到的对象有:File对象,FileList对象,FileReader对象。

FileList对象

FileList来自于两个地方,分别是input元素的files属性以及drag and drop API(当拖动文件时,event.DataTransfer.files就是一个FileList对象)

<input id="fileItem" type="file">
var fileList = document.getElementById('fileItem').files

FileList对象的标准属性

length:这个一个只读属性,这个属性返回FileList对象中包含的File对象的长度。

FileList对象的标准方法

item(index):取得FileList对象中指定位置的File对象。它可以用数组索引的形式去简写

File对象

FileList对象的每一项都是File对象。File对象是一种特殊的Blob。

File对象的标准属性

1.lastModified:返回文件被修改的时间,这个时间是距离1970年1月1日0点0时0分经过的毫秒数。是一个只读属性

2.name:返回文件对象引用的文件的文件名,这是一个只读属性

3.type:返回文件对象引用的文件的文件类型,是MINE type,这个是一个只读属性。

4.size:返回文件对象引用的文件的文件大小,这个一个只读属性。

File对象的标准方法

没有给File对象单独定义方法,但是它有从Blob对象那儿继承来的方法。

FileReader对象

FileReader对象使web应用能够异步读取用户计算机上的文件。

FileReader()是一个构造函数,通过它可以创建一个新的FileReader对象。

var fileReader = new FileReader();

FileReader对象的标准属性

1.error:返回文件读取过程中发生的错误。

2.result:返回文件的内容,返回值得类型是String或者ArrayBuffer。这个属性只有在读取操作完成之后才是合法的。

3.readyState:返回读取操作当前的状态,可能的取值是0:还没有开始读取,1:正在读取,2:读取完成。

FileReader对象的标准方法

1.abort():中断读取操作。readyState的值变成2.

2.readAsArrayBuffer(Blob):读取指定的Blob,如一个File对象(File对象是一种特殊的Blob)。只要读取完成,readyState属性的值就会变为2,result属性是一个表示文件数据的ArrayBuffer。

3.readAsDataURL(Blob):读取指定的Blob,如一个File对象(File对象是一种特殊的Blob)。只要读取完成,readyState属性的值就会变为2,result属性是一个表示文件数据的URL,并且数据格式是base64编码的字符串

<input type="file" onchange="previewFile()"><br>
<img src="" height="200" alt="Image preview...">
function previewFile() {
  var preview = document.querySelector('img');
  var file    = document.querySelector('input[type=file]').files[0];
  var reader  = new FileReader();
  reader.addEventListener("load", function () {
    preview.src = reader.result;
  }, false);
  if (file) {
    reader.readAsDataURL(file);
  }
}

4.readAsText(Boob,encoding):读取指定的Blob,如一个File对象(File对象是一种特殊的Blob)。只要读取完成,readyState属性的值就会变为2,result属性是一个表示文件数据的文本字符串。第二个参数是可选的,它用于指定result属性中文本字符串的编码方式,默认为UTF-8。

FileReader对象的事件

1.abort:终止读取操作时触发。

2.error:读取操作过程中遇到错误时触发。

3.load:读取操作成功的完成时触发。

4.loadend:读取操作结束时触发。不能是读取成功还是读取失败。

5.loadStart:读取操作开始时触发。

6.process:读取过程中触发。

在web应用中使用文件

使用HTML5中的文件对象,可以访问选择的本地文件,并且读取这些文件中的内容。文件对象要么来自于input元素,要么来自于drag and drop接口。

通过input元素选择文件

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

访问通过input选择的文件

var selectedFile = document.getElementById('input').files[0];

上述代码段一次只能选择一个文件,如果一次要选择多个文件,就需要给input元素添加一个multiple属性,并将multiple属性设置我true。在Gecko 1.9.2之前不支持一次选择多个文件。

通过drag and drop接口选择文件

关于drag and drop接口可以查看HTML5 DragEvent。

第一步:创建一个放置区域。一个普通的元素,如div,p等。

第二步:给放置区添加drop,dragenter,dragover事件处理程序。其中起关键作用的是drop事件处理程序。

下面是一个显示缩略图的例子:

<div id='dropbox' class='dropbox'></div>
.dropbox{
 border:solid 3px red;
 height:400px;
 width:auto;      
}
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();
}
function drop(e) {
  e.stopPropagation();
  e.preventDefault();
  var dt = e.dataTransfer;
  var files = dt.files;
  handleFiles(files);
}
function handleFiles(files) {
  for (var i = 0; i < files.length; i++) {
    var file = files[i];
    var imageType = /^image\//;
    if (!imageType.test(file.type)) {
      continue;
    }
    var img = document.createElement("img");
    img.file = file;
    dropBox.appendChild(img); 
    var reader = new FileReader();
    reader.onload =  function() {
        img.src = reader.result; 
        };
    reader.readAsDataURL(file);
  }
}

以上所述是小编给大家介绍的HTML5 File接口在web页面上使用文件下载,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

HTML / CSS 相关文章推荐
简单掌握CSS3将文字描边及填充文字颜色的方法
Mar 07 HTML / CSS
使用CSS3的appearance属性改变任何元素的浏览器默认风格
Dec 24 HTML / CSS
CSS3 text shadow字体阴影效果
Jan 08 HTML / CSS
canvas之万花筒效果的简单实现(推荐)
Aug 16 HTML / CSS
移动web模拟客户端实现多方框输入密码效果【附代码】
Mar 25 HTML / CSS
浅谈cookie和localStorage那些事
Aug 27 HTML / CSS
详解FireFox下Canvas使用图像合成绘制SVG的Bug
Jul 10 HTML / CSS
使用phonegap获取设备的一些信息方法
Mar 31 HTML / CSS
详解H5 活动页之移动端 REM 布局适配方法
Dec 07 HTML / CSS
处理textarea中的换行和空格
Dec 12 HTML / CSS
HTML5 实现图片上传预处理功能
Feb 06 HTML / CSS
关于flex 上下文中自动 margin的问题(完整例子)
May 20 HTML / CSS
使用phonegap检测网络状态的方法
Mar 30 #HTML / CSS
HTML5文档结构标签
Apr 21 #HTML / CSS
HTML5的文档结构和新增标签完全解析
Apr 21 #HTML / CSS
html5的localstorage详解
May 09 #HTML / CSS
基于HTML5 Canvas 实现弹出框效果
Jun 05 #HTML / CSS
html5中localStorage本地存储的简单使用
Jun 16 #HTML / CSS
HTML5实现QQ聊天气泡效果
Jun 26 #HTML / CSS
You might like
php中用memcached实现页面防刷新功能
2014/08/19 PHP
一个非常完美的读写ini格式的PHP配置类分享
2015/02/12 PHP
Zend Framework实现多服务器共享SESSION数据的方法
2016/03/22 PHP
Yii使用DeleteAll连表删除出现报错问题的解决方法
2016/07/14 PHP
ThinkPHP实现登录退出功能
2017/06/29 PHP
laravel5.4利用163邮箱发送邮件的步骤详解
2017/09/22 PHP
一个CSS+jQuery实现的放大缩小动画效果
2014/02/19 Javascript
jquery获取tagName再进行判断
2014/05/29 Javascript
AngularJS快速入门
2015/04/02 Javascript
jQuery预加载图片常用方法
2015/06/15 Javascript
JS建造者模式基本用法实例分析
2015/06/30 Javascript
JS实现适合于后台使用的动画折叠菜单效果
2015/09/21 Javascript
JavaScript如何调试有哪些建议和技巧附五款有用的调试工具
2015/10/28 Javascript
jquery设置表单元素为不可用的简单代码
2016/07/04 Javascript
Angularjs 创建可复用组件实例代码
2016/10/09 Javascript
JS图片预加载插件详解
2017/06/21 Javascript
React-Native之定时器Timer的实现代码
2017/10/04 Javascript
Angular整合zTree的示例代码
2018/01/24 Javascript
解决Mac下安装nmp的淘宝镜像失败问题
2018/05/16 Javascript
webpack4+express+mongodb+vue实现增删改查的示例
2018/11/08 Javascript
详解Vue前端对axios的封装和使用
2019/04/01 Javascript
详解ES6数组方法find()、findIndex()的总结
2020/05/12 Javascript
Python中类的定义、继承及使用对象实例详解
2015/04/30 Python
Python的标准模块包json详解
2017/03/13 Python
Flask框架web开发之零基础入门
2018/12/10 Python
浅析matlab中imadjust函数
2020/02/27 Python
Django-rest-framework中过滤器的定制实例
2020/04/01 Python
python 如何实现遗传算法
2020/09/22 Python
俄罗斯达美乐比萨外送服务:Domino’s Pizza
2020/12/18 全球购物
EJB3.1都有哪些改进
2012/11/17 面试题
高中生综合素质自我评价
2015/03/06 职场文书
《植树问题》教学反思
2016/03/03 职场文书
求职信如何撰写?
2019/05/22 职场文书
如何在CocosCreator里画个炫酷的雷达图
2021/04/16 Javascript
python编写五子棋游戏
2021/05/25 Python
《艾尔登法环》1.03.3补丁上线 碎星伤害调整
2022/04/06 其他游戏