Javascript 文件读取器读取为数据URL

我正在开发Chrome应用商店。显然，文件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函数到底出了什么问题

---

有人有什么想法吗？

嗯，我觉得这个不错。目前的行为是什么？您正在将drop事件附加到音频元素本身？您可以去掉闭包，因为您只使用第一个文件，而不在

文件列表中循环

下面是一个类似的DnD文件片段（它使用图像而不是src）：

作为替代方案，您可以使用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
  };
}

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