Question

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

我一直收到一个TypeError：form为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'正在接收其元素，并且不为空。

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

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

提前致谢。

编辑：我应该补充一点，这个演示是在ASP .ascx用户控制表单中。 kami-sama的Code Snippet工作得非常好，但在我的解决方案中它不会做同样的事情。

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

Answer 1

您应该声明您的表单将通过添加enctype="multipart/form-data"

来处理上传的文件

w3 w3schools

Answer 2

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

＆＃13;

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...';
}

＆＃13;

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

＆＃13;

html输入fileupload返回null

2 个答案: