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弹性布局内容对齐(justify-content)属性使用详解
Jul 31 HTML / CSS
css实例教程 一款纯css3实现的超炫动画背画特效
Nov 05 HTML / CSS
一款基于css3麻将筛子3D翻转特效的实例教程
Dec 31 HTML / CSS
css和css3弹性盒模型实现元素宽度(高度)自适应
May 15 HTML / CSS
CSS3 新增选择器的实例
Nov 13 HTML / CSS
CSS3制作皮卡丘动画壁纸的示例
Nov 02 HTML / CSS
CSS3 实现倒计时效果
Nov 25 HTML / CSS
html5指南-1.html5全局属性(html5 global attributes)深入理解
Jan 07 HTML / CSS
使用HTML5中的contentEditable来将多行文本自动增高
Mar 01 HTML / CSS
HTML5实现页面切换激活的PageVisibility API使用初探
May 13 HTML / CSS
Html5实现文件异步上传功能
May 19 HTML / CSS
html table呈现个人简历以及单元格宽度失效的问题解决
Jan 22 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
ajax缓存问题解决途径
2006/12/06 PHP
PHP面向对象学习笔记之二 生成对象的设计模式
2012/10/06 PHP
PHP处理excel cvs表格的方法实例介绍
2013/05/13 PHP
PHP callback函数使用方法和注意事项
2015/01/23 PHP
PHP调用.NET的WebService 简单实例
2015/03/27 PHP
php中get_defined_constants函数用法实例分析
2015/05/12 PHP
Jquery 设置标题的自动翻转
2009/10/03 Javascript
分享20款好玩的jQuery游戏
2011/04/17 Javascript
jQuery(1.6.3) 中css方法对浮动的实现缺陷分析
2011/09/09 Javascript
javascript学习(二)javascript常见问题总结
2013/01/02 Javascript
js操纵dom生成下拉列表框的方法
2014/02/24 Javascript
jquery数组封装使用方法分享(jquery数组遍历)
2014/03/25 Javascript
jquery弹窗插件colorbox绑定动态生成元素的方法
2014/06/20 Javascript
JavaScript随机生成信用卡卡号的方法
2015/04/07 Javascript
js操作cookie保存浏览记录的方法
2015/12/25 Javascript
JavaScript DOM节点操作方法总结
2016/08/23 Javascript
vue实现固定位置显示功能
2019/05/30 Javascript
微信小程序中的video视频实现 自定义播放按钮、封面图、视频封面上文案
2020/01/02 Javascript
简单的编程0基础下Python入门指引
2015/04/01 Python
微信跳一跳python辅助脚本(总结)
2018/01/11 Python
Python 字符串转换为整形和浮点类型的方法
2018/07/17 Python
在pandas多重索引multiIndex中选定指定索引的行方法
2018/11/16 Python
浅谈python图片处理Image和skimage的区别
2019/08/04 Python
Python将主机名转换为IP地址的方法
2019/08/14 Python
Python timeit模块的使用实践
2020/01/13 Python
Python实现CAN报文转换工具教程
2020/05/05 Python
CSS3 中filter(滤镜)属性使用详解
2020/04/07 HTML / CSS
巴西最大的巴士票务门户:Quero Passagem
2020/11/21 全球购物
艺术应用与设计个人的自我评价
2013/11/23 职场文书
青年教师典范事迹材料
2014/01/31 职场文书
培训楼经理岗位责任制
2014/02/10 职场文书
2014年销售员工作总结
2014/12/01 职场文书
nginx常用命令放入shell脚本详解
2021/03/31 Servers
多线程Spring通过@Scheduled实现定时任务
2022/05/25 Java/Android
numpy array找出符合条件的数并赋值的示例代码
2022/06/01 Python
TS 类型兼容教程示例详解
2022/09/23 Javascript