当前位置:首页 > HTML5教程 > HTML5高阶

如何使用HTML5File接口在web页面上使用文件下载

这篇文章主要介绍了关于如何使用html5 file接口在web页面上使用文件下载,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下

file接口提供了与文件相关的信息,并且运行javascript在web页面上去访问文件中的内容。接下来通过本文给大家介绍html5 file接口在web页面上使用文件下载功能,需要的的朋友参考下

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。

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

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

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

<p id='dropbox' class='dropbox'></p>
.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);
  }
}


【说明】本文章由站长整理发布,文章内容不代表本站观点,如文中有侵权行为,请与本站客服联系(QQ:254677821)!

相关教程推荐

其他课程推荐