Jquery统计表单文件总大小

所有的代码总是有寿命的，尤其是前端

使用struts2上传文件的时候后台设置了maxFileSize，为了用户体验，我们需要在前端判断待上传文件的大小。如果超出设置的最大值，我们简单alert一下，提醒用户重新上传。为此，一个新的技术问题出现了：如何使用js或者jq统计表单文件的大小？
在百度上搜索了许多方法，资料大都是比较久远的时代的代码。在自己机器上测试的时候却是经常性的行不通，控制台频繁报错：undefined function。
时代在进步，技术在发展，一些老旧的代码终究还是要被淘汰。
这里提供一个使用jq统计表单文件总大小的方法：在谷歌浏览器上测试通过

     /**
      * 获取文件的总大小
      */
      $("#submit").click(function () {
          var size = $("#maxFileSize").text();
          var actualSize =0;
          $("input[type=file]").each(function () {
              actualSize += $(this)[0].files[0].size
          });
          if (actualSize/1024/1024>size){
              alert("当前文件总大小:"+actualSize+" 已超出限制");
              return false;
          }else{
              alert("当前文件总大小:"+actualSize);
              alert("准备提交");
          }
      })

简单解释一下：
获取文件总大小的大体思路是这样的：
在提交表单前，先遍历file控件，获取每个file控件的引用，使用$(this)[0].files[0].size方法获取当前文件的字节数。所以最后与设置的文件最大值比较的时候需要转换为MB。

前端界面代码如下：

　<form action="mulFileUpload.action" method="post" id="form" enctype="multipart/form-data">
      <p>文件上传最大值为 <span id="maxFileSize">100</span>M</p>
      欢迎登录： <s:property value="%{#session.student.nickName}"/><br>
      <div class="upload-files">上传作业: <input id="first-file" onchange="showAddBtn()" type="file" name="upload"></div>
      <div class="add-upload-files">
          <!--添加新文件-->
      </div>
      <button class="add-file" type="button" hidden="hidden">再上传一个</button>
      <!--选择文件名称上传-->
      <!--判断文件大小，重复上传同一个文件，一次上传多个重复文件-->
      <br>
      <s:fielderror name="errorTips"/>
      <input type="submit" id="submit" value="submit">
  </form>