28

FileReader APIを使用してChromeでファイルのコンテンツを取得する例を教えてもらえますか？

戻っundefinedてきたようです。

<!doctype html>
<html>
<script>
function handle_files(files) {
  console.log(files)
  reader = new FileReader()
  ret = []
  for (i = 0; i < files.length; i++) {
    file = files[i]
    console.log(file)
    text = reader.readAsText(file) //readAsdataURL
    console.log(text) //undefined
    ret.push(text)
  }
  console.log(ret) // [undefined]

}
</script>
<body>
FileReader Test
<input type="file" onchange="handle_files(this.files)">
</body>
</html>
4

2 に答える 2

36

私の問題は、FileReaderが同期していると思っていたことです。これが正しい方法です。Chromeを使用している場合、このコードはサーバー（localhostまたはサイト）で実行されている必要があります。ローカルファイルでは機能しません。

<!doctype html>
<html>
<script>
function handle_files(files) {
  for (i = 0; i < files.length; i++) {
    file = files[i]
    console.log(file)
    var reader = new FileReader()
    ret = []
    reader.onload = function(e) {
      console.log(e.target.result)
    }
    reader.onerror = function(stuff) {
      console.log("error", stuff)
      console.log (stuff.getMessage())
    }
    reader.readAsText(file) //readAsdataURL
  }

}
</script>
<body>
FileReader that works!
<input type="file" multiple onchange="handle_files(this.files)">
</body>
</html>
于 2010-11-04T20:52:49.013 に答える
18

File API FileReaderオブジェクトは、FireFox、Opera、またはInternet Explorer 10と同じようにChromeで動作します（うん、IEで動作します）。

簡単な例

まず、リーダーの新しいインスタンスを宣言します。

var reader = new FileReader();

さまざまなイベントのコールバックを定義します。

reader.onloadend = function(){
    document.body.style.backgroundImage = "url(" + this.result + ")";
}

そして、それを読むために何かを渡します：

reader.readAsDataURL(file);

フィドル： http： //jsfiddle.net/jonathansampson/K3A9r/

複数のファイルの処理

複数のファイルを操作している場合は、状況が少し異なります。結果のFileListを循環させる必要があることは明らかですが、ファイルデータが何度も繰り返されることを防ぐために、クロージャーを使用する必要もあります。

    // Continue only if we have proper support
    if ( window.FileReader ) {

      // Provide our logic upon the change even of our input
      document.getElementById("collection").onchange = function(){

        // Couple variables for handling each file
        var counter = -1, file;

        // Cycle over all files
        while ( file = this.files[ ++counter ] ) {

          // Create a reader for this particular file
          var reader = new FileReader();

          // Respond to the onloadend event of the reader
          reader.onloadend = (function(file){
            return function(){
              var image = new Image();
              image.height = 100;
              image.title = file.name;
              image.src = /^image/.test(file.type) ? this.result : "t9QlH.png";
              document.body.appendChild( image );
            }
          })(file);

          // Begin reading data for this file
          reader.readAsDataURL( file );
        }
      }
    }​

フィドル： http： //jsfiddle.net/jonathansampson/jPTV3/

特徴の検出

FileReaderは、ほとんどすべての最新のブラウザーで使用できますが、それでも、古いブラウザーのユーザーに騒ぎを起こさないようにする必要があります。FileReaderを使用する前に、ウィンドウオブジェクトが存在するかどうかを必ず確認してください。

if ( window.FileReader ) {
    // Safe to use FileReader
}

Chromeからローカルで実行

Chromeのfile：///パスでこれを実行すると、エクスペリエンスが損なわれることに注意してください。デフォルトでは、Chromeの現在のバージョンでは、file：///ページが他のファイルにアクセスすることを許可していません。--allow-file-access-from-filesフラグを使用してChromeを読み込んでこの動作を変更できます。

ここに画像の説明を入力してください

このメソッドは、それが開かれたブラウザのインス​​タンス上のファイルへのファイルアクセスのみを許可することに注意してください。将来的にすべてのブラウザインスタンスにこれを当てはめる場合は、デスクトップからショートカットを変更できます。Chromeショートカットを右クリックして、[プロパティ]に移動します。次に、ターゲットの最後にフラグを追加します。

于 2012-06-14T00:02:05.293 に答える