Javascript html输入文件上载返回null

我正在尝试制作一个包含html输入文件上传程序和ajax的演示，但我甚至无法将我的脚本设置为getElementById

我一直收到一个TypeError：表单为空

这是我的html和脚本：

<form id="file-form" action="handler.php" enctype="multipart/form-data" method="POST">
  <input type="file" id="file-select" name="photos[]" multiple/>
  <button type="submit" id="upload-button">Upload</button>
</form>

<script type="text/javascript">
    var form = document.getElementById("file-form");
    var fileSelect = document.getElementById("file-select");
    var uploadButton = document.getElementById("upload-button");

form.onsubmit = function (event) {
    event.preventDefault();

    // Update button text.
    uploadButton.innerHTML = 'Uploading...';
}
</script>

上传
var form=document.getElementById（“文件格式”）；
var fileSelect=document.getElementById（“文件选择”）；
var uploadButton=document.getElementById（“上载按钮”）；
form.onsubmit=函数（事件）{
event.preventDefault（）；
//更新按钮文本。
uploadButton.innerHTML='Uploading…'；
}

请注意，“fileSelect”和“uploadButton”正在接收它们的元素，并且不为null

由于某些原因，表单无法获取元素

我见过几个类似的问题，但看起来我做的是对的。如果你有任何建议，请告诉我

提前谢谢

编辑：我应该补充一点，这个演示是在ASP.ascx用户控件表单中。kami sama的代码片段工作得非常好，但在我的解决方案中不会这样做

---

我在getElementById之后记录'form'变量，它返回null，并且不会超过form.onsubmit=函数（事件）行。

您应该通过添加

enctype=“multipart/form data”

---

我刚刚在代码中添加了右括号，它在StackOverflow代码段和Firefox html文件中运行良好

var form=document.getElementById（“文件格式”）；
var fileSelect=document.getElementById（“文件选择”）；
var uploadButton=document.getElementById（“上载按钮”）；
form.onsubmit=函数（事件）{
event.preventDefault（）；
//更新按钮文本。
uploadButton.innerHTML='Uploading…'；
}

上传

是否缺少onsubmit函数的右括号（

}

）？是的，我是@Glorfindel。幸运的是，这存在于我的源代码中。无论如何，谢谢。您认为我的错误与.ascx用户控件有关吗？我从未使用过.ascx用户控件，但它认为getElementById函数无论如何都必须工作（它与输入和按钮有关）。您可以尝试将

var-form…

替换为

var-form=fileSelect.parentNode

并将这一行移到

var-fileSelect

下面。我尝试了一下，但它最终会拖出整个div。我想知道我是否忘记了表单属性中的某些内容。