multiple でアップーロードされた複数画像を処理したいときに
こんなコード書いて困ったことはありませんか?奥さん
var files = $(this)[0].files; for (var iLp = 0; iLp < files.length; iLp++) { image.onload = function() { conlose.log("width=" + image.width); conlose.log("filesize=" + file.size); }; image.src = URL.createObjectURL(file); }
これだと、結果がなぜか全部同じwidth, sizeになるんですよ。
これって、image.onload のコールバックが遅れて実行されるときには
forループが最後まで回ってしまって、全部最後の file を参照してしまうっていう(笑)
これの解決方法なんですが、
javascript特有の即時関数ていうのを使います。
余談ですが、この概念はjavascriptでしかないらしく
初めて聞いた時、カルチャーショックを受けました。
ただし、ES6 では、このよくわからない概念はなくなるそうです
(ああ、この問題で悩むので時間を浪費したので、さっさとなくなって欲しかった)
以下のようにすると、なぜか
ちゃんと file を同期して取得してくれるみたいです。
あら不思議
var files = $(this)[0].files; for (var iLp = 0; iLp < files.length; iLp++) { (function(file) { image.onload = function() { conlose.log("width=" + image.width); conlose.log("filesize=" + file.size); }; image.src = URL.createObjectURL(file); } (file)); }