HTML5自带的文件系统API接口DEMO

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 3090
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

window.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem;
var fs = null;

function errorHandler(e) {
  var msg = '';
  switch (e.code) {
    case FileError.QUOTA_EXCEEDED_ERR:
      msg = 'QUOTA_EXCEEDED_ERR';
      break;
    case FileError.NOT_FOUND_ERR:
      msg = 'NOT_FOUND_ERR';
      break;
    case FileError.SECURITY_ERR:
      msg = 'SECURITY_ERR';
      break;
    case FileError.INVALID_MODIFICATION_ERR:
      msg = 'INVALID_MODIFICATION_ERR';
      break;
    case FileError.INVALID_STATE_ERR:
      msg = 'INVALID_STATE_ERR';
      break;
    default:
      msg = 'Unknown Error';
      break;
  };
  document.querySelector('#example-list-fs-ul').innerHTML = 'Error: ' + msg;
}

function initFS() {
  window.requestFileSystem(window.TEMPORARY, 1024*1024, function(filesystem) {
    fs = filesystem;
  }, errorHandler);
}

var buttons = document.querySelectorAll('#example-list-fs button');
var filelist = document.querySelector('#example-list-fs-ul');

if (buttons.length >= 3) {
  buttons[0].addEventListener('click', function(e) {
    if (!fs) {
      return;
    }
    fs.root.getFile('log.txt', {create: true}, null, errorHandler);
    fs.root.getFile('song.mp3', {create: true}, null, errorHandler);
    fs.root.getDirectory('mypictures', {create: true}, null, errorHandler);
    filelist.innerHTML = 'Files created.';
  }, false);

buttons[1].addEventListener('click', function(e) {
    if (!fs) {
      return;
    }

var dirReader = fs.root.createReader();
    dirReader.readEntries(function(entries) {
      if (!entries.length) {
        filelist.innerHTML = 'Filesystem is empty.';
      } else {
        filelist.innerHTML = '';
      }

var fragment = document.createDocumentFragment();
      for (var i = 0, entry; entry = entries[i]; ++i) {
        var img = entry.isDirectory ? '<img src="http://www.html5rocks.com/static/images/tutorials/icon-folder.gif">' :
                                      '<img src="http://www.html5rocks.com/static/images/tutorials/icon-file.gif">';
        var li = document.createElement('li');
        li.innerHTML = [img, '<span>', entry.name, '</span>'].join('');
        fragment.appendChild(li);
      }
      filelist.appendChild(fragment);
    }, errorHandler);
  }, false);

buttons[2].addEventListener('click', function(e) {
    if (!fs) {
      return;
    }

// Initiate filesystem on page load.
if (window.requestFileSystem) {
  initFS();
}

编译

CSS

HTML

<!DOCTYPE html>
<html>
  <head>
    <style>
      .example {
        padding: 10px;
        border: 1px solid #CCC;
      }
      #example-list-fs ul {
        padding-left: 0;
      }
      #example-list-fs li {
        list-style: none;
      }
      #example-list-fs img {
        vertical-align: middle;
      }
      button {
        padding: 5px 8px;
        cursor: pointer;
        text-shadow: 1px 1px white;
        font-weight: 700;
        font-size: 10pt;
      }
      body {
        font: 14px Arial;
      }
    </style>
  </head>
  <body>
    <div id="example-list-fs" class="example">
      <button>Add some files</button> <button>List files</button> <button>Remove all files</button>
      <ul id="example-list-fs-ul"></ul>
    </div>
    <script>
      window.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem;
      var fs = null;
      
      function errorHandler(e) {
        var msg = '';
        switch (e.code) {
          case FileError.QUOTA_EXCEEDED_ERR:
            msg = 'QUOTA_EXCEEDED_ERR';
            break;
          case FileError.NOT_FOUND_ERR:
            msg = 'NOT_FOUND_ERR';
            break;
          case FileError.SECURITY_ERR:
            msg = 'SECURITY_ERR';
            break;
          case FileError.INVALID_MODIFICATION_ERR:
            msg = 'INVALID_MODIFICATION_ERR';
            break;
          case FileError.INVALID_STATE_ERR:
            msg = 'INVALID_STATE_ERR';
            break;
          default:
            msg = 'Unknown Error';
            break;
        };
        document.querySelector('#example-list-fs-ul').innerHTML = 'Error: ' + msg;
      }
      
      function initFS() {
        window.requestFileSystem(window.TEMPORARY, 1024*1024, function(filesystem) {
          fs = filesystem;
        }, errorHandler);
      }
      
      var buttons = document.querySelectorAll('#example-list-fs button');
      var filelist = document.querySelector('#example-list-fs-ul');
      
      if (buttons.length >= 3) {
        buttons[0].addEventListener('click', function(e) {
          if (!fs) {
            return;
          }
          fs.root.getFile('log.txt', {create: true}, null, errorHandler);
          fs.root.getFile('song.mp3', {create: true}, null, errorHandler);
          fs.root.getDirectory('mypictures', {create: true}, null, errorHandler);
          filelist.innerHTML = 'Files created.';
        }, false);
      
        buttons[1].addEventListener('click', function(e) {
          if (!fs) {
            return;
          }
      
          var dirReader = fs.root.createReader();
          dirReader.readEntries(function(entries) {
            if (!entries.length) {
              filelist.innerHTML = 'Filesystem is empty.';
            } else {
              filelist.innerHTML = '';
            }
      
            var fragment = document.createDocumentFragment();
            for (var i = 0, entry; entry = entries[i]; ++i) {
              var img = entry.isDirectory ? '<img src="https://www.html5rocks.com/static/images/tutorials/icon-folder.gif">' :
                                            '<img src="https://www.html5rocks.com/static/images/tutorials/icon-file.gif">';
              var li = document.createElement('li');
              li.innerHTML = [img, '<span>', entry.name, '</span>'].join('');
              fragment.appendChild(li);
            }
            filelist.appendChild(fragment);
          }, errorHandler);
        }, false);
      
        buttons[2].addEventListener('click', function(e) {
          if (!fs) {
            return;
          }
      
          var dirReader = fs.root.createReader();
          dirReader.readEntries(function(entries) {
            for (var i = 0, entry; entry = entries[i]; ++i) {
              if (entry.isDirectory) {
                entry.removeRecursively(function() {}, errorHandler);
              } else {
                entry.remove(function() {}, errorHandler);
              }
            }
            filelist.innerHTML = 'Directory emptied.';
          }, errorHandler);
        }, false);
      }
      
      // Initiate filesystem on page load.
      if (window.requestFileSystem) {
        initFS();
      }
    </script>
  </body>
</html>

HTML5自带的文件系统API接口DEMO

编辑器支持Emmet

快捷键

HTML5自带的文件系统API接口DEMO

使用HTML5 Audio API（AudioContext）实现的DJ划拨碟片音效

HTML5 Web音频应用程序接口（Web Audio API）实例：在线演奏木琴

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：