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 Audio タグのsrc属性にロードすることです。このドロップ機能で何が間違っているのかわかりません。

誰にもアイデアはありますか？

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 に答える