jsで複数画像のファイル名、画像の表示

forループ内で非同期な関数を定義して実行するとループが先に終了し、後から非同期で関数が呼ばれるためです。
なので、for文で囲ってる内容を別の関数に定義して、その関数を呼ぶか、クロージャーを使うかのいずれかの方法をとる必要があります。

// 別関数を定義して呼ぶ
for(var i = 0; i < len; i++ ) {
  fileLoad(files[i]);
}

function fileLoad(file) {
  var fr = new FileReader(); 
  fr.onload = function(e) { 
    var src = e.target.result; 
    var img = '<div><div>' + file.name + '</div><div><div><img src="'+ src +'"></div></div>'; 
    $('#preview').append(img); 
  } 
  fr.readAsDataURL(file); 
}

// クロージャーを使用する
for(var i = 0; i < len; i++ ) {
  (function() {
    var j = i; // いったん変数をクロージャー内で再定義させる。
    var file = files[j]; 
    var fr = new FileReader(); 
    fr.onload = function(e) { 
      var src = e.target.result; 
      var img = '<div><div>' + file.name + '</div><div><div><img src="'+ src +'"></div></div>'; 
      $('#preview').append(img); 
    } 
    fr.readAsDataURL(file); 
  })();
}

てか、そもそもとして、もしレガシーブラウザーは対象にしていないというのでしたら、

for(var i = 0; i < len; i++) {
  var fnm = files[i].name;
  var src = URL.createObjectURL(files[i]);
  var img = '<div><div>' + fnm + '</div><div><div><img src="'+ src +'"></div></div>';
  $('#preview').append(img); 
}

で行けると思います。