Question

我在IE9和Firefox上使用此代码很好，但现在它仅适用于Firefox，它只是不在IE9上执行Java验证部分。知道我可能需要做什么才能使它适用于这两种类型的浏览器？感谢

  <?php
   if(isset($_POST['submit'])) {
      $first_name=$_POST['fname'];
     echo 'Entered First Name = '.$first_name;
  }
  ?>
  <html>

  <form method="post" enctype="multipart/form-data" action="">
      <label for="fname"> First Name: </label> <input  type="text" name="fname"  /> <br /><br />
      <label for="file"> Select File: </label> <input  type="file" id="file" />
      <input type="submit" name="submit" value="Submit" />
  </form>

  <script>
  document.forms[0].addEventListener('submit', function( evt ) {
     var file = document.getElementById('file').files[0];

      if(file && file.size < 18000) { 
          //Submit form
         alert('Size is valid');
      } else {
         alert('pic too big');
         evt.preventDefault();
      }
  }, false);
  </script>
  </html>

Answer 1

files数组不存在的事实不是由于代码错误。 Internet Explorer 9及以下do not support HTML5 File API，因此您必须使用解决方法，例如使用Java小程序或Adobe Flash上传。

Answer 2

结合Alex W所说的，你的代码也需要一些调整。 getElementsByName需要您尝试选择的名称属性。它返回一个元素的NodeList，其名称在函数中给出。。

~~将input更改为name属性，然后您甚至不需要该功能：~~

~~<input type="file" name="file" />~~ id工作得很好。见下文。

我的研究证实了这一点。以上所有内容都适用于getElementsByName，但是要检索File对象，您必须通过选择文件输入表单类型从返回的数组中调用它。因此，document.getElementById('file').files[0] 应该工作。下面的方法也是如此：

window.onload = (function () {
    document.forms[0].addEventListener('submit', function (evt) {
        //this works
        var file = document.forms[0].file.files[0];
        //as does this
        file = document.getElementById('file').files[0];
        if (file && file.size < 18000) {
            //Submit form
            alert('Size is valid');
        } else {
            alert('pic too big');
            evt.preventDefault();
        }
    }, false);
});

<强> jsFiddle

即使说完了，它仍然不适用于不支持HTML5文件API的浏览器（看着你的IE）。

修改

哇，哇，谁拥有统治权？我刚刚读到，一旦IE6被破解，id属性被定为替换name属性。显然这是旧消息^{1 2 3}。

所以我做了一些测试，事实证明id在以相同的方式调用元素时效果很好：

var file = document.forms[0].file;

证明吗？ Ok

Answer 3

看起来你有一个脚本错误。

IE9似乎不支持files属性

document.forms[0].addEventListener('submit', function( evt ) {
    var f = document.getElementById('file');
    var file = f.files ? f.files[0] : f;

    if(file && file.size < 18000) { 
        //Submit form
        alert('Size is valid');
    } else {
        alert('pic too big');
        evt.preventDefault();
    }
}, false);

演示：Fiddle

document.getElementByName代码在Firefox上运行正常，但在IE9上不起作用

3 个答案:

修改