东城公司网站开发：掌握HTML 5文件API

2019.05.27 东城公司网站开发

170

HTML 5文件API允许开发人员在客户端与本地文件系统交互。使用这些API，开发人员可以构建更健壮的Web应用程序，这些应用程序可以无缝地在线和脱机工作。本教程演示了这些API用于执行诸如读取文件的属性和内容等常见任务的基本用法。

免责声明-在撰写本文时，东城公司网站开发只有最新版本的Chrome、Firefox和Opera支持这些特性。

实时下载源代码

1。特性检测-检查浏览器是否支持HTML 5文件API

在继续之前，必须检查浏览器是否支持以下文件API：

档案
-提供只读信息，例如
名字，姓名, 类型, 大小
和
最后修改日期.
文件列表
-在处理多个文件的选择时，包含所有文件对象的列表。
文件阅读器
-对象以读取文件。

if (window.File && window.FileList && window.FileReader) {
    /************************************ 
     * All the File APIs are supported. * 
     * Entire code goes here.           *
     ************************************/} else {
    alert('Sorry! you're browser does not support HTML5 File APIs.');
}

2。处理单个文件的选择。

东城公司网站开发加载文件的最简单方法是使用标准方法，该方法只允许选择单个文件：

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

试一试：

3。处理多个文件的选择。

简单地添加multiple属性设置为输入元素。这个name="files[]"变量存储所有选定文件的列表。这使用户能够在一个实例中选择多个文件。注意，即使可以在对话框中选择文件夹，浏览器在处理时也会忽略它们。

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

试一试：

4。列出所有选定的文件及其属性。

东城公司网站开发实现此功能的最简单方法是将侦听器附加到输入元素并调用一个函数，该函数将尝试读取所选文件的属性：

function listFileProperties(event) {
    /* Read the list of the selected files. */
    var files = event.target.files; 

    /* Read each file and list down the properties in a table. */
    var output = "<table><tr><td>Filename</td><td>File Type</td><td>File Size</td><td>Last Modified Date</td></tr>";

    for (var i = 0, f; f = files[i]; i++) 
    {
        output += "<tr><td>" + escape(f.name) + "</td>";       /* f.name - Filename  */
        output += "<td>" + f.type  + "</td>";                  /* f.type - File Type */
        output += "<td>" + f.size + " bytes</td>";             /* f.size - File Size */
        output += "<td>" + f.lastModifiedDate + "</td></tr>";  /* f.lastModifiedDate - Last Modified Date */
    }
    
    output += "</table>";
    document.getElementById('list').innerHTML = output;   }/* Listener for single file input element. */document.getElementById('file').addEventListener('change', listFileProperties, false);/* Listener for multiple files input element. */document.getElementById('files').addEventListener('change', listFileProperties, false);

试试看。

5。拖放多个文件。

我们首先创建一个分区作为一个拖放区域，其中文件将被删除。然后，我们将侦听器附加到两个事件-“Dragover”和“Drop”。对于‘DROP’事件，我们调用试图读取文件属性的函数。其余的代码，基本保持不变。

<div id="drop_zone">Drop files here</div><output id="list"></output><script>function handleDragOver(event) {
    event.stopPropagation();
    event.preventDefault();
    event.dataTransfer.dropEffect = 'copy';}function handleDnDFileSelect(event) {    
    event.stopPropagation();
    event.preventDefault();

    /* Read the list of the selected files. */
    var files = event.dataTransfer.files;
    
    /* Read each file and list down the properties in a table. */
    var output = "<table><tr><td>Filename</td><td>File Type</td><td>File Size</td><td>Last Modified Date</td></tr>";

    for (var i = 0, f; f = files[i]; i++) 
    {
        output += "<tr><td>" + escape(f.name) + "</td>";       /* f.name - Filename  */
        output += "<td>" + f.type  + "</td>";                  /* f.type - File Type */
        output += "<td>" + f.size + " bytes</td>";             /* f.size - File Size */
        output += "<td>" + f.lastModifiedDate + "</td></tr>";  /* f.lastModifiedDate - Last Modified Date */
    }
    
    output += "</table>";
    document.getElementById('list').innerHTML = output;   }/* Setup the Drag-n-Drop listeners. */var dropZone = document.getElementById('drop_zone');dropZone.addEventListener('dragover', handleDragOver, false);dropZone.addEventListener('drop', handleDnDFileSelect, false);</script>

试试看。

6。读一份文件。

实例化FileReader对象，使用新的FileReader()将内容读入内存。当加载完成时，读者的onload事件被触发，并且其result属性可用于访问文件数据。

<button id="readFile">Read File</button><output id="content"></output>
    <script>
    function readFile() {
    /* Get the reference of the inpout element. */
    var files = document.getElementById('files').files;

    if (!files.length) 
    {
      alert('Please select a file!');
      return;
    }
    
    /* Reading the first file selected. You can process other files similarly in loop. */
    var file = files[0];

    /* Instantiate the File Reader object. */
    var reader = new FileReader();

    /* onLoad event is fired when the load completes. */
    reader.onload = function(event) {
        document.getElementById('content').textContent = event.target.result;      
    };

    /* The readAsText method will read the file's data as a text string. By default the string is decoded as 'UTF-8'. */
    reader.readAsText(file);}
     document.getElementById('readFile').addEventListener('click', function(event) {
      readFile();    
  }, false);</script>

试试看。