0

我在 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>
4

3 回答 3

3

files数组不存在的事实不是由于代码错误。Internet Explorer 9 及更低版本不支持HTML5 File API，因此您必须使用解决方法，例如使用 Java 小程序或 Adob​​e Flash 上传。

于 2013-05-27T03:41:54.593 回答
1

Combined with what Alex W said, your code also needs some tweaking. getElementsByName requires a name attribute from where you are trying to select. It returns a NodeList of elements with the name given in the function. .

Change your input to have a name attribute, then you won't even need that function:

<input type="file" name="file" /> id works just fine. See below.

I stand corrected by my own research. All the above is true about getElementsByName, however to retrieve the File object, you have to call it from an array returned by selecting a file input form type. As such, document.getElementById('file').files[0] should work. So will the method below:

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

Even after all is said and done, it still will not work in browsers that do not support the HTML5 File API (looking at you IE).

Edit

Whoa, whoa, whoa hold the reigns? I just read that the id attribute was slated to replace the name attribute once IE6 gets nuked. Apparently this is old news1 2 3.

So I did some testing and it turns out id works just fine when calling the element the same way:

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

Prove it? Ok

于 2013-05-27T03:48:39.703 回答
0

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

filesIE9 似乎不支持该属性

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);

演示：小提琴

于 2013-05-27T03:17:22.577 回答