FileReader 读取为 DataUrl答案

【问题标题】：FileReader read as DataUrlFileReader 读取为 DataUrl
【发布时间】：2011-09-05 19:20:47
【问题描述】：

我正在 Chrome App Store 上开发 this app。显然 File API 发生了变化，所以我需要实现 FileReader 来获取拖放到页面上的文件的本地 URL。

function drop(evt) {

    v = evt.target.id;

    evt.stopPropagation();
    evt.preventDefault();

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

    var f = files[0];

    var reader = new FileReader();

          // Closure to capture the file information.
          reader.onload = (function(theFile) {
            return function(e) {
              document.getElementById(v).src = e.target.result;
            };
          })(f);

   reader.readAsDataURL(f);
}

我要做的是将拖放到页面上的歌曲的 URL 加载到 HTML5 音频标签的 src 属性中。我不知道我在使用这个 drop 函数时做错了什么。

有人有什么想法吗？

【问题讨论】：

标签： javascript html google-chrome google-chrome-extension fileapi

【解决方案1】：

最终的解决方案很简单。您无法从本地文件系统测试文件读取器 API。这会创建一个安全错误 - 由本地文件系统中的空文件头引起。要修复它，只需在任何 Web 服务器上进行测试即可。

【讨论】：

【解决方案2】：

嗯，这对我来说是正确的。当前的行为是什么？您将放置事件附加到音频元素本身？您可以摆脱关闭，因为您只使用第一个文件而不是循环通过 FileList

这是一个类似的 DnD 文件 sn-p（它使用图像而不是 src）： http://www.html5rocks.com/tutorials/file/dndfiles/#toc-selecting-files-dnd

作为替代方案，您可以使用 blobURL：

window.URL = window.URL || window.webkitURL;

function drop(evt) {
  ...
  var file = evt.dataTransfer.files[0];
  ...
  audio.src = window.URL.createObjectURL(file);
  audio.onload = function(e) {
    window.URL.revokeObjectURL(this.arc); // clean up
  };
}

【讨论】：