multipleを使わない(1つだけ)であれば、input type=”file”で画像アップロード前にプレビュー表示(jQuery)の方法で、プレビューが可能ですが、multipleを指定した場合に、複数画像をプレビュー表示する必要があったのでメモ。

複数選択できるhtmlを用意

用意するhtmlについては、以前書いたこの(input type=”file”で複数ファイル選択と形式を指定(html5)）エントリーを参照で。

ま、下記のような感じで

<form action="/uploads" enctype="multipart/form-data">
  <input type="file" id="icon" name="icon" multiple="multiple" accept="image/*">
</form>
<div id="preview" style="display:none"></div>

プレビュー用にdivを追加しました。

プレビュー用のjs

やってる処理としては、ほぼ単一ファイルの時と同じ。

$(function(){
  $('#icon').change(function(){
    if ( !this.files.length ) {
      return;
    }
    $('#preview').text('');

    var $files = $(this).prop('files');
    var len = $files.length;
    for ( var i = 0; i < len; i++ ) {
      var file = $files[i];
      var fr = new FileReader();

      fr.onload = function(e) {
        var src = e.target.result;
        var img = '<img src="'+ src +'">';
        $('#preview').append(img);
      }

      fr.readAsDataURL(file);
    }

    $('#preview').css('display','block');
  });
});

基本的には単一のファイルの時と同じですが、filesが複数入っているのでforで回しながらimgタグをプレビューに追加していく感じで。
上記のjsを読みこめば、ファイルが選択された時点でプレビューが表示されるはずです。