3

我正在Chrome App Store上开发这个应用程序。显然 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 功能时做错了什么。

有人有什么想法吗？

4

2 回答 2

2

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

于 2011-08-19T20:32:27.280 回答
1

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

这是一个类似的 DnD 文件片段（它使用图像而不是 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
  };
}
于 2011-06-02T01:28:37.113 回答