4

http://www.html5rocks.com/en/tutorials/file/dndfiles/#toc-reading-filesの例を変更して、関数 handleFileSelect(evt) が reader.result; を返すようにしようとしています。関数が画像などに対してbase64を返すようにすることを意味します。私は関数でそれを書き込もうとしましたが、nullのみを返します:(だから私の質問は、関数がbase64を返すようにする方法ですか?

今のところ、このスニペットを書き込もうとしました...

function handleFileSelect(evt) {
    var files = evt.target.files; // FileList object

    // Loop through the FileList and render image files as thumbnails.
    for (var i = 0, f; f = files[i]; i++) {

      // Only process image files.
      if (!f.type.match('image.*')) {
        continue;
      }

      var reader = new FileReader();

      // Closure to capture the file information.
      reader.onload = (function(theFile) {
        return function(e) {
          // Render thumbnail.
          var span = document.createElement('span');
          span.innerHTML = ['<img class="thumb" src="', e.target.result,
                            '" title="', theFile.name, '"/>'].join('');
          document.getElementById('list').insertBefore(span, null);
        };
      })(f);

      // Read in the image file as a data URL.
      reader.readAsDataURL(f);
    }
    return reader.result;
  }

すべての有益なコメントをお待ちしております:)

4

1 に答える 1

2

FileReader オブジェクトの詳細はわかりませんが、URL から非同期でデータを読み取るようです。つまり、関数が reader.result を返すとき、FileReader オブジェクトはまだファイルの読み取りを完了していません。これは、onload コールバックが呼び出されるまで (または他のエラー状態が発生するまで) 終了しません。

そのため、読み取りがまだ非同期で行われている間に関数が返されます。したがって、結果はまだ決定されていません。結果は、onload コールバックの側で、または (推測では) エラー状態 (onabort、onerror など) を示す他のコールバック内で利用できます。

于 2011-07-09T05:03:06.650 に答える