javascript - JQuery 随机停止工作 ( .size() )

Question

所以我制作了一个表单，并尝试在处理它之前使用 JavaScript 对其进行验证。其他所有领域都工作得很好。这就是表单的外观。

<form name="game_sub" action="add_game.php" onsubmit="return gameVal()" method="post">
        <table>

            <tr><td><input type="text" name="name" class="game_name" placeholder="NAME" /></td></tr>
            <tr><td>
            <select name="keyword" >
                <option value="action">Action</option>
                <option value="platform">Platform</option>
                <option value="sport">Sport</option>
                <option value="shooter">Shooter</option>
            </select>
            </td></tr>
            <tr><td><label>Game: </label><input type="file" name="game_file" id="g_file"></td></tr>
            <tr><td><label>Thumbnail: </label><input type="file" name="game_thumb" id="t_file"></td></tr>
            <tr><td><textarea name="desc" placeholder="DESCRIPTION"></textarea></td></tr>
        </table>
        <a href="index.php"><button type="button" id="add_btn_lft" class="add_btn">CANCEL</button></a>
        <input type="submit" value="SUBMIT" id="add_btn_rgt" class="add_btn"/>

然后我添加 JavaScript。 javascript 有一小行 jQuery，通过它我已经将 google jquery 源脚本添加到页面顶部。它完美地工作了大约 1 个小时，我离开了，回来时它就坏了。我通过将一些行变成注释来检查它出了什么问题，看看它的缺失是否会使其再次工作。我这样做了，当我删除变量时:

var TSize = document.forms.game_sub.game_thumb.form[0].size;

整个剧本又恢复了生机。我使用 jQuery 的 .size 来获取文件的大小，它工作了一段时间，但我不知道发生了什么......它只是随机决定不工作。 javascript 在其中执行 jQuery 是否有问题？我以前做过，没有任何问题，但这很奇怪。

这就是我的 .js 文件的样子:

function gameVal() {

  var GName = document.forms.game_sub.name.value;
  var GCat = document.forms.game_sub.keyword.value;
  var GFile = document.forms.game_sub.game_file.value;
  var GThumb = document.forms.game_sub.game_thumb.value;
  var Tarea = document.forms.game_sub.desc.value;
  var BErr = document.getElementById("add_game_err");
  var GFile2 = GFile.split(".");
  var GThumb2 = GThumb.split(".");
  var imgExt = ["jpg", "jiff", "jpeg", "gif", "tiff"];
  var gameExt = ["swf", "unity3d"];

  if (window.File && window.FileReader && window.FileList && window.Blob) {

  if (GFile == "" || GThumb == "" || GName == "" || GName == null || GCat == "Category" || Tarea == "") {
    BErr.style.display = "block";
    BErr.innerHTML = "Please fill in all the fields.";
    return false;
  }
  else if (GFile2.length > 2) {
    BErr.style.display = "block";
    BErr.innerHTML = "Please make sure the game file name has no periods(.) within it.";
    return false;
  }
  else if (GThumb2.length > 2) {
    BErr.style.display = "block";
    BErr.innerHTML = "Please make sure the thumbnail file name has no periods(.) within it.";
    return false;
  }
  else if (imgExt.indexOf(GThumb2[1]) == -1) {
    BErr.style.display = "block";
    BErr.innerHTML = "Thumbnail file format is invalid. (Only JPG, JIFF, JPEG, GIF, TIFF are allowed.)";
    return false;

  }
  else if (gameExt.indexOf(GFile2[1]) == -1) {
        BErr.style.display = "block";
        BErr.innerHTML = "Game file format is invalid.";
        return false;
  }
  else {
  var TSize = document.forms.game_sub.game_thumb.form[0].size;
  if (TSize > 1000000) {
    BErr.style.display = "block";
    BErr.innerHTML = "Thumbnail is too big. (Max size: 1MB)";
    return false;
  }
  else {
    BErr.style.display = "block";
    BErr.innerHTML = "Error";
    return false;
  }
  }
}
else {
    BErr.style.display = "block";
    BErr.innerHTML = "Your browser is outdated and cannot support file upload. Please update to latest version.";
    return false;

}
}

我在本地主机服务器和 jsbin.com 上测试了它，它有效。但奇怪的是，随着时间的流逝，它不知怎的就停止工作了。而且这种情况已经发生过两次了。我昨晚处理了它，然后今天早上打开它，同样的事情发生了。我修好了它。然后今天下午，又看了一遍，还是一样……

Answer 1

该代码所做的事情与您的想法完全不同，并且该代码中没有 jQuery。

input 元素的 form 属性返回其所在的表单，因此 document.forms.game_sub.game_thumb.form 返回与 document.forms.game_sub 相同的值。

在表单上使用 [0] 获取表单中的第一个字段，即名称输入字段，并使用 .size 读取属性 尺寸来自名称输入字段。

size 属性用于指定输入的字符宽度。

我认为您正在寻找 files 属性:

var TSize = document.forms.game_sub.game_thumb.files[0].size;