FileReader читается как DataUrl

Question

Я работаю над этим приложением в Chrome App Store. Очевидно, что 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-адрес песни, перетащенной на страницу, в атрибут src тега HTML5 Audio. Я не могу понять, что я делаю не так с этой функцией отбрасывания.

У кого-нибудь есть идеи?

Answer 1

Решение в итоге было простым.Вы не можете протестировать File Reader API из локальной файловой системы.Это создает ошибку безопасности, вызванную пустыми заголовками файлов из локальной файловой системы.Чтобы это исправить, просто протестируйте его на любом веб-сервере.

Answer 2

Хм, это выглядит правильно для меня. Каково текущее поведение? Вы прикрепляете событие drop к самому аудиоэлементу? Вы можете избавиться от замыкания, так как вы используете только первый файл, а не проходите через 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
  };
}