现代浏览器如火狐的功能files[0]

------解决方案--------------------

var docObj = document.getElementById('file');

docObj.files && docObj.files[0])
是现代浏览器支持的功能，如Firefox
现在的浏览器的<input id='file' type=file multiple="true" />

可以支持一次选取多个图片的，所以，得到一张的方法就是docObj.files[0];

例子：

// fileInput是一个HTML Input元素: <input type="file" multiple id="myfileinput">
var fileInput = document.getElementById("myfileinput");
// files是一个FileList对象(类似于NodeList,是多个file对象的集合)
var files = fileInput.files;
// 仅允许 *.png, *.jpeg *.gif 类型的图片文件
var allowedFileTypes = ["image/png", "image/jpeg", "image/gif"];

for (var i = 0; i < files.length; i++) {
    // 如果文件的文件类型属于allowFileTypes其中的一种
    if (allowdFileTypes.indexOf(files[i].type) > -1) {
        // 对符合条件的文件进行处理
    }
}

完整的例子：

<input type="file" multiple id="myfileinput" οnchange="updateSize();">
        <script type="text/javascript">
        function updateSize(){

         // fileInput是一个HTML Input元素: <input type="file" multiple id="myfileinput">
          var fileInput = document.getElementById("myfileinput");
          // files是一个FileList对象(类似于NodeList,是多个file对象的集合)
          var files = fileInput.files;
          // 仅允许 *.png, *.jpeg *.gif 类型的图片文件
          var allowedFileTypes = ["image/png","image/jpg", "image/jpeg", "image/gif"];

          for (var i = 0; i < files.length; i++) {
              // 如果文件的文件类型属于allowFileTypes其中的一种
              if (allowedFileTypes.indexOf(files[i].type) > -1) {
                  // 对符合条件的文件进行处理
                  console.log(files[i].type);
              }
          }
            
        }
        </script>