web-dev-qa-db-ja.com

Chrome FileReader

FileReader APIの使用例を誰かが私に教えてくれますか？

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>
htmlgoogle-chromefilereader
27
Drew LeSueur

私の問題は、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>
33
Drew LeSueur

File API FileReaderオブジェクトは、Chromeでの動作は、FireFox、Opera、またはInternet Explorer 10での動作と同じです（うん、 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しないでくださいt file：///ページが他のファイルにアクセスすることを許可します。この動作を変更できますChrome --allow-file-access-from-files フラグ。

enter image description here

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

18
Sampson