複数の画像をアップロードする前に画像を確認する方法[asp:fileupload]を使って

一度に複数枚の画像を選択して、保存する前、選択した画像を画面に表示して確認したい思うことがあった。
今までだったら、いちいち一時的にサーバーに保存してから、
保存が確定になったら本番のパスに切り替え、一時保存の方を消すっていうのをやってたんだけど、なんかめんどくさいな～
と思ったので別の方法を探していたらありました。

jsのFileStream()で画像のプレビュー（確認）ができそうだったのでやってみた。

[html]

[js]

$("#file_upload").change(function(){
//input type="file"の値が変わったら発火
var file_count = $("#file_upload")[0].files.length;
//画像の数を取得
var file = $("#file_upload")[0].files;
//すべての画像の情報を取得
var imageList ="";
if(file_count > 0){
for(var i = 0; i < file_count; i++){
var filereader = new FileReader();
var file_info = file[i];
filereader.onload = function(event){
imageList = imageList + '';
　　//画像のurlを作って
if(i == (file_count)){
$("#represent").html(imageList);
}
//最後に、#representに着ける、if文の数については下で説明します。
}
//filereaderを先に読み込む
filereader.readAsDataURL(file_info);
//readAsDateURLメソッドでファイルを読み込む、他にあるので好きなのでいい
}
}else{
alert("画像が選ばれてません");
$("#represent").html("");
}
});

と、こんな感じで動かしたら動きました。
それと、途中で説明すると書いたif文について、
おそらくこれを見た人は、「iが0から始まってるのになんでこれで通るんだ」と思うでしょう
僕もそうでした、というかその考えだったので最初しばらくうまく動きませんでした。
理由は、動き方が思っていたのと違っていたからです。

最初の僕（おそらく今の皆さんも）、まず、for文で一回周るごとにreadAdDateURLでファイルを読み込んで
上のonloadに行ってその処理が終わったら、次の二回目のforを回ると考えているのではないでしょうか

ここでは書きませんが、いたるところのconsolo.logをいれて動かしてみると、
動きとしては、まず、for文が画像の枚数分回り終えて、その後それぞれの画像ファイルの
onloadが始まっていました。
なので、for文が回らなくなった時、今回で言うとiが画像の枚数と同じ数になった時に回らなくなるので
if文の中のiは画像の枚数と同じじゃないと通らないということになるのです。