HTML 输入文件上传返回空值

html input fileupload returning null

本文关键字：返回 空值 输入 文件 HTML      更新时间：2023-09-26

我正在尝试制作一个涉及html输入文件上传器和ajax的演示，但我甚至无法让我的脚本getElementById。

我不断收到类型错误：表单为空。

这是我的 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"正在接收它们的元素，并且不为空。

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

我见过几个类似的问题，但似乎我在做正确的事情。如果您有任何建议，请告诉我。

提前谢谢。

编辑：我应该补充一点，这个演示是在ASP .ascx用户控件窗体中。 kami-sama的代码片段工作得很好，但它在我的解决方案中不会做同样的事情。

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

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

W3W3学校

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

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...';
}
<form id="file-form" action="handler.php" method="POST">
  <input type="file" id="file-select" name="photos[]" multiple/>
  <button type="submit" id="upload-button">Upload</button>
</form>

相关文章：