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

时间2024-01-23 12:10:27发布访客分类HTML浏览461

导读：收集整理的这篇文章主要介绍了如何使用HTML5 File接口在web页面上使用文件下载，觉得挺不错的，现在分享给大家，也给大家做个参考。这篇文章主要介绍了关于如何使用HTML5 File接口在web页面上使用文件下载，有着一定的参考价值，现...

收集整理的这篇文章主要介绍了如何使用HTML5 File接口在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);
  }
}

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！