javascript - html输入fileupload返回null

我正在尝试制作一个涉及html输入文件上载器和ajax的演示，但我什至无法将脚本获取到getElementById。

我不断收到TypeError：表单为null。

这是我的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>

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

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

我已经看过几个类似的问题，但似乎我做对了。如果您有任何建议，请告诉我。

提前致谢。

编辑：我应该添加此演示是在ASP .ascx用户控制窗体中。 kami-sama的代码段非常完美，但在我的解决方案中却无法实现。

我在getElementById之后记录'form'变量，它返回null，并且不会继续通过form.onsubmit = function（event）行。

最佳答案

您应该通过添加enctype="multipart/form-data"声明您的表单将处理上传的文件

w3
w3schools

关于javascript - html输入fileupload返回null，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/30869393/