通过 File API 使用 JavaScript 读取文件

原文地址：http://www.html5rocks.com/zh/tutorials/file/dndfiles/

简介

HTML5 终于为我们提供了一种通过 File API 规范与本地文件交互的标准方式。为了举例说明其功能，可使用 File API 在向服务器发送图片的过程中创建图片的缩略图预览，或者允许应用程序在用户离线时保存文件引用。另外，您可以使用客户端逻辑来验证上传内容的 mimetype 与其文件扩展名是否匹配，或者限制上传内容的大小。

该规范通过“本地”文件系统提供了多种文件访问接口：

  1. File - 独立文件；提供只读信息，例如名称、文件大小、mimetype 和对文件句柄的引用。
  2. FileList - File 对象的类数组序列（考虑 <input type="file" multiple> 或者从桌面拖动目录或文件）。
  3. Blob - 可将文件分割为字节范围。

与以上数据结构结合使用时，FileReader 接口可用于通过熟悉的 JavaScript 事件处理来异步读取文件。因此，可以监控读取进度、找出错误并确定加载何时完成。这些 API 与 XMLHttpRequest 的事件模型有很多相似之处。

请注意：在编写此教程时，Chrome 浏览器 6.0 和 Firefox 3.6 均支持处理本地文件所必需的 API。从 Firefox 3.6.3 起，就不支持 File.slice() 方法了。

选择文件

首先需要检查您的浏览器是否完全支持 File API：

// Check for the various File API support.
if (window.File && window.FileReader && window.FileList && window.Blob) {
  // Great success! All the File APIs are supported.
} else {
  alert(‘The File APIs are not fully supported in this browser.‘);
}

当然，如果您的应用程序只会用到这些 API 中的一小部分，请相应地修改此代码段。

使用表单输入进行选择

要加载文件，最直接的方法就是使用标准 <input type="file"> 元素。JavaScript 会返回选定的 File 对象的列表作为 FileList。以下示例使用“multiple”属性实现了同时选择多个文件：

<input type="file" id="files" name="files[]" multiple />
<output id="list"></output>

<script>
  function handleFileSelect(evt) {
    var files = evt.target.files; // FileList object

    // files is a FileList of File objects. List some properties.
    var output = [];
    for (var i = 0, f; f = files[i]; i++) {
      output.push(‘<li><strong>‘, escape(f.name), ‘</strong> (‘, f.type || ‘n/a‘, ‘) - ‘,
                  f.size, ‘ bytes, last modified: ‘,
                  f.lastModifiedDate.toLocaleDateString(), ‘</li>‘);
    }
    document.getElementById(‘list‘).innerHTML = ‘<ul>‘ + output.join(‘‘) + ‘</ul>‘;
  }

  document.getElementById(‘files‘).addEventListener(‘change‘, handleFileSelect, false);
</script>

示例：使用表单输入进行选择。赶快试试吧！

使用拖放操作进行选择

另一种加载文件的方法是在本地将文件从桌面拖放到浏览器。我们可以对前一个示例稍作修改，加入拖放支持。

<div id="drop_zone">Drop files here</div>
<output id="list"></output>

<script>
  function handleFileSelect(evt) {
    evt.stopPropagation();
    evt.preventDefault();

    var files = evt.dataTransfer.files; // FileList object.

    // files is a FileList of File objects. List some properties.
    var output = [];
    for (var i = 0, f; f = files[i]; i++) {
      output.push(‘<li><strong>‘, escape(f.name), ‘</strong> (‘, f.type || ‘n/a‘, ‘) - ‘,
                  f.size, ‘ bytes, last modified: ‘,
                  f.lastModifiedDate.toLocaleDateString(), ‘</li>‘);
    }
    document.getElementById(‘list‘).innerHTML = ‘<ul>‘ + output.join(‘‘) + ‘</ul>‘;
  }

  function handleDragOver(evt) {
    evt.stopPropagation();
    evt.preventDefault();
    evt.dataTransfer.dropEffect = ‘copy‘; // Explicitly show this is a copy.
  }

  // Setup the dnd listeners.
  var dropZone = document.getElementById(‘drop_zone‘);
  dropZone.addEventListener(‘dragover‘, handleDragOver, false);
  dropZone.addEventListener(‘drop‘, handleFileSelect, false);
</script>

示例：使用拖放操作进行选择。赶快试试吧！

将文件拖放到此处

请注意，有些浏览器会将 <input type="file"> 元素视为本地拖放目标。在前一个示例中尝试将文件拖动到输入字段上。

读取文件

现在精彩的部分到了！

当您获取了 File 引用后，实例化 FileReader 对象，以便将其内容读取到内存中。加载结束后，将触发读取程序的 onload 事件，而其 result 属性可用于访问文件数据。

FileReader 包括四个异步读取文件的选项：

  • FileReader.readAsBinaryString(Blob|File) - result 属性将包含二进制字符串形式的 file/blob 数据。每个字节均由一个 [0..255] 范围内的整数表示。
  • FileReader.readAsText(Blob|File, opt_encoding) - result 属性将包含文本字符串形式的 file/blob 数据。该字符串在默认情况下采用“UTF-8”编码。使用可选编码参数可指定其他格式。
  • FileReader.readAsDataURL(Blob|File) - result 属性将包含编码为数据网址的 file/blob 数据。
  • FileReader.readAsArrayBuffer(Blob|File) - result 属性将包含ArrayBuffer 对象形式的 file/blob 数据。

对您的 FileReader 对象调用其中某一种读取方法后，可使用onloadstart、onprogress、onload、onabort、onerror 和 onloadend 跟踪其进度。

下面的示例从用户选择的内容中过滤掉了图片，对文件调用reader.readAsDataURL()，并通过将“src”属性设为数据网址来呈现缩略图。

<style>
  .thumb {
    height: 75px;
    border: 1px solid #000;
    margin: 10px 5px 0 0;
  }
</style>

<input type="file" id="files" name="files[]" multiple />
<output id="list"></output>

<script>
  function handleFileSelect(evt) {
    var files = evt.target.files; // FileList object

    // Loop through the FileList and render image files as thumbnails.
    for (var i = 0, f; f = files[i]; i++) {

      // Only process image files.
      if (!f.type.match(‘image.*‘)) {
        continue;
      }

      var reader = new FileReader();

      // Closure to capture the file information.
      reader.onload = (function(theFile) {
        return function(e) {
          // Render thumbnail.
          var span = document.createElement(‘span‘);
          span.innerHTML = [‘<img class="thumb" src="‘, e.target.result,
                            ‘" title="‘, escape(theFile.name), ‘"/>‘].join(‘‘);
          document.getElementById(‘list‘).insertBefore(span, null);
        };
      })(f);

      // Read in the image file as a data URL.
      reader.readAsDataURL(f);
    }
  }

  document.getElementById(‘files‘).addEventListener(‘change‘, handleFileSelect, false);
</script>

示例：读取文件。赶快试试吧！

用图片目录试试这个示例吧！

分割文件

在某些情况下，将整个文件读取到内存中并不是最好的选择。例如，您要编写一个异步文件上传器。要提高上传速度，一种可行的方法是以彼此独立的字节范围块读取和发送文件。然后，由服务器组件负责按正确顺序重建文件。

对我们来说幸运的是，File 接口支持分割方法，因而可以支持此用例。在该方法中，起始字节为第一个参数，终止字节为第二个参数，选项内容类型字符串为第三个参数。该方法的语义近期做了更改，因此已由供应商添加前缀：

if (file.webkitSlice) {
  var blob = file.webkitSlice(startingByte, endindByte);
} else if (file.mozSlice) {
  var blob = file.mozSlice(startingByte, endindByte);
}
reader.readAsBinaryString(blob);

以下示例演示了如何读取文件块。值得注意的是，该示例使用 onloadend 并检查evt.target.readyState，而不是使用 onload 事件。

<style>
  #byte_content {
    margin: 5px 0;
    max-height: 100px;
    overflow-y: auto;
    overflow-x: hidden;
  }
  #byte_range { margin-top: 5px; }
</style>

<input type="file" id="files" name="file" /> Read bytes:
<span class="readBytesButtons">
  <button data-startbyte="0" data-endbyte="4">1-5</button>
  <button data-startbyte="5" data-endbyte="14">6-15</button>
  <button data-startbyte="6" data-endbyte="7">7-8</button>
  <button>entire file</button>
</span>
<div id="byte_range"></div>
<div id="byte_content"></div>

<script>
  function readBlob(opt_startByte, opt_stopByte) {

    var files = document.getElementById(‘files‘).files;
    if (!files.length) {
      alert(‘Please select a file!‘);
      return;
    }

    var file = files[0];
    var start = parseInt(opt_startByte) || 0;
    var stop = parseInt(opt_stopByte) || file.size - 1;

    var reader = new FileReader();

    // If we use onloadend, we need to check the readyState.
    reader.onloadend = function(evt) {
      if (evt.target.readyState == FileReader.DONE) { // DONE == 2
        document.getElementById(‘byte_content‘).textContent = evt.target.result;
        document.getElementById(‘byte_range‘).textContent =
            [‘Read bytes: ‘, start + 1, ‘ - ‘, stop + 1,
             ‘ of ‘, file.size, ‘ byte file‘].join(‘‘);
      }
    };

    if (file.webkitSlice) {
      var blob = file.webkitSlice(start, stop + 1);
    } else if (file.mozSlice) {
      var blob = file.mozSlice(start, stop + 1);
    }
    reader.readAsBinaryString(blob);
  }

  document.querySelector(‘.readBytesButtons‘).addEventListener(‘click‘, function(evt) {
    if (evt.target.tagName.toLowerCase() == ‘button‘) {
      var startByte = evt.target.getAttribute(‘data-startbyte‘);
      var endByte = evt.target.getAttribute(‘data-endbyte‘);
      readBlob(startByte, endByte);
    }
  }, false);
</script>

示例：分割文件。赶快试试吧！

读取字节： 1-5 6-15 7-8整个文件

监控读取进度

我们在使用异步事件处理时还能顺便获得一项优势，那就是能够监控文件的读取进度；这对于读取大文件、查找错误和预测读取完成时间非常实用。

onloadstart 和 onprogress 事件可用于监控读取进度。

以下示例演示了如何通过显示进度条来监控读取状态。要查看进度指示器的实际效果，请尝试读取大文件或远程驱动器中的文件。

<style>
  #progress_bar {
    margin: 10px 0;
    padding: 3px;
    border: 1px solid #000;
    font-size: 14px;
    clear: both;
    opacity: 0;
    -moz-transition: opacity 1s linear;
    -o-transition: opacity 1s linear;
    -webkit-transition: opacity 1s linear;
  }
  #progress_bar.loading {
    opacity: 1.0;
  }
  #progress_bar .percent {
    background-color: #99ccff;
    height: auto;
    width: 0;
  }
</style>

<input type="file" id="files" name="file" />
<button onclick="abortRead();">Cancel read</button>
<div id="progress_bar"><div class="percent">0%</div></div>

<script>
  var reader;
  var progress = document.querySelector(‘.percent‘);

  function abortRead() {
    reader.abort();
  }

  function errorHandler(evt) {
    switch(evt.target.error.code) {
      case evt.target.error.NOT_FOUND_ERR:
        alert(‘File Not Found!‘);
        break;
      case evt.target.error.NOT_READABLE_ERR:
        alert(‘File is not readable‘);
        break;
      case evt.target.error.ABORT_ERR:
        break; // noop
      default:
        alert(‘An error occurred reading this file.‘);
    };
  }

  function updateProgress(evt) {
    // evt is an ProgressEvent.
    if (evt.lengthComputable) {
      var percentLoaded = Math.round((evt.loaded / evt.total) * 100);
      // Increase the progress bar length.
      if (percentLoaded < 100) {
        progress.style.width = percentLoaded + ‘%‘;
        progress.textContent = percentLoaded + ‘%‘;
      }
    }
  }

  function handleFileSelect(evt) {
    // Reset progress indicator on new file selection.
    progress.style.width = ‘0%‘;
    progress.textContent = ‘0%‘;

    reader = new FileReader();
    reader.onerror = errorHandler;
    reader.onprogress = updateProgress;
    reader.onabort = function(e) {
      alert(‘File read cancelled‘);
    };
    reader.onloadstart = function(e) {
      document.getElementById(‘progress_bar‘).className = ‘loading‘;
    };
    reader.onload = function(e) {
      // Ensure that the progress bar displays 100% at the end.
      progress.style.width = ‘100%‘;
      progress.textContent = ‘100%‘;
      setTimeout("document.getElementById(‘progress_bar‘).className=‘‘;", 2000);
    }

    // Read in the image file as a binary string.
    reader.readAsBinaryString(evt.target.files[0]);
  }

  document.getElementById(‘files‘).addEventListener(‘change‘, handleFileSelect, false);
</script>

示例：监控读取进度。赶快试试吧！

取消读取

0%

提示：要查看进度指示器的实际效果，请尝试读取大文件或远程驱动器中的资源。

时间： 2024-10-22 15:06:04

通过 File API 使用 JavaScript 读取文件的相关文章

javascript 计算文件MD5 浏览器 javascript读取文件内容

原则上说,浏览器是一个不安全的环境.早期浏览器的内容是静态的,用户上网冲浪,一般就是拉取网页查看.后来,随着互联网的发展,浏览器提供了非常丰富的用户交互功能.从早期的表单交互,到现在的websocket实时通信,乃至html5的流行. html5给前段开发带来了许多有力的工具,以前浏览器大多通过flash插件进行文件的上传和下载,现在我们可以利用html5给我们带来的fileReader api,读取用户通过表单选中的文件内容. fileReader详情请移步: https://develope

使用File API 之FileReader 实现文件上传

对于基于浏览器的应用而言,访问本地文件都是一件头疼的事情,通常我们能做的仅仅是使用<input type="file">标签来上传文件.实现过程是:选取文件的时候value 属性保存了用户指定的文件的名称,表单被提交的时候,浏览器会向服务器发送选中的文件的内容而不仅仅是发送文件名.再获取服务器返回的地址,然后做预览. 但是如果有一天我们要上传一个图片,传了图片后预览想换另一张图片,就又得先上传到服务器再预览.在网络比较慢的情况下,这样真的很折腾. 所以我们某些时候需要先预览

HTML5 File API — 让前端操作文件变的可能

前言 在 HTML5 File API 出现之前,前端对于文件的操作是非常有局限性的,大多需要配合后端实现.出于安全角度考虑,从本地上传文件时,代码不可能获取文件在用户本地的地址,所以纯前端不可能完成一些类似图片预览的功能.但是 File API 的出现,让这一切变成了可能. 跟着楼主由浅入深,了解下强大的 File API 吧. FileList FileList 对象针对表单的 file 控件.当用户通过 file 控件选取文件后,这个控件的 files 属性值就是 FileList 对象.

IE8上传文件时javascript读取文件的本地路径的问题（&quot;C:\fakepath\&quot;）的解决方案

<script type="text/javascript"> function getPath(obj) { if (obj) { if (window.navigator.userAgent.indexOf("MSIE") >= 1) { obj.select(); return document.selection.createRange().text; } else if (window.navigator.userAgent.indexO

File API 读取文件小结

简单地说,File API只规定怎样从硬盘上提取文件,然后交给在网页中运行的JavaScript代码. 与以往文件上传不一样,File API不是为了向服务器提交文件设计的. 关于File API不能做什么也非常值得注意.它不能修改文件,也不能创建新文件. 想保存任何数据,你可以通过Ajax把数据发送到服务器,或者把它保存在本地存储空间中. 取得文件 使用input元素.将其type属性设置为file,这样是最常见的标准上传文本框 隐藏的input元素.为了保证风格一致,可以把input元素隐藏

HTML5的File API读取文件信息

html结构: <div id="fileImage"></div> <input type="file" value="upload" id="fileInput"> <p id="fileInfo"></p> css样式: #fileImage{width: 300px;height: 300px; margin: 20px auto;back

file API+JCrop 选择、裁剪并上传头像

file API,直接读取本地文件,绕过了后台处理再返回前台的过程,使编程更简单.fileAPI和JCrop的结合使用上传头像. 1.html部分 <input id="demo" type="file" onchange="showPic();"/> <img id="avatar" src=""> 2.fileAPI预览图片(jquery) <script type=&qu

HTML5 File API解读

1,概述 Web应用应该具备处理广泛用户输入问题的能力,例如在Web富应用中,用户希望上传文件到服务器.File API定义了访问文件的基本操作途径,包括文件.文件列表集.错误处理等,同时,File API还定义了描述文件异步处理进程中的一些元数据.接下来,我们一起看看File的应用. 2,FileList接口 接口描述: 1 interface FileList { 2 getter File? item(unsigned long index); 3 readonly attribute u

h5新特性 File API详解

之前一直觉得h5的新特性就是一些新标签呢,直到想研究一下图片上传预览的原理,才发现还是有好多新的api的,只是不兼容ie低版本,挺可惜的, File API在表单中文件输入字段基础上,又添加了一些直接访问文件信息的接口.H5在DOM中为文件输入元素添加了一个files集合,在通过表单元素选择了一个或多个文件时,files集合中将包含一组file对象,每个file对象对应一个文件,每个file对象都有下列只读属性: 1.name:本地文件系统的文件名: 2.size:文件的字节大小: 3.type