アップロードするファイルをリスト出力し、ajax アップロードを行う。結果をリストに追加表示する。

upload_files.js

function uploadFiles(files) {
  var fileListHtml = '<ul>';
  // for (var i = 0; i < files.length; i++) では、error, success 時の liId が束縛されず最後の値となる
  // files は FileList を想定しており、FileList#forEach は存在しないのでこのような書き方となる
  [].forEach.call(files, function(file, idx, list) {
    var liId = 'file_' + idx;
    fileListHtml += '<li id="' + liId + '">' + file.name + '</li>';
    var formData = new FormData();
    formData.append('file', file);
    j$.ajax('<@f.path uri="upload" />', {
      method: 'POST', // jQuery 1.7 では type でないと動かない
      contentType: false,
      processData: false,
      data: formData,
      error: function(xhr, err) {
        var txt = j$('#' + liId).text();
        j$('#' + liId).text(txt + ' ----- x');
      },
      success: function(res) {
        var txt = j$('#' + liId).text();
        j$('#' + liId).text(txt + ' ----- o');
      }
    });
  });
  fileListHtml += '</ul>';
  j$('#uploadFileList').html(fileListHtml);
}