javascript - html input fileupload returning null - Stack Overflow

admin管理员组

文章数量:1426012

I am trying to make a demo involving an html input file uploader and ajax, but I can't even get my script to getElementById.

I keep receiving an TypeError: form is null.

Here is my html and script:

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

Note that 'fileSelect' and 'uploadButton' are receiving their elements and are not null.

For some reason form is not able to getElement.

I've seen several similar questions, but it seems like I am doing the right thing. Let me know if you have any suggestions.

Thanks in advance.

EDIT: I should add that this demo is in an ASP .ascx User Control Form. kami-sama's Code Snippet worked perfectly fine, but it will not do the same in my solution.

I log the 'form' variable after getElementById and it returns null and does not proceed past the form.onsubmit = function(event) line.

I am trying to make a demo involving an html input file uploader and ajax, but I can't even get my script to getElementById.

I keep receiving an TypeError: form is null.

Here is my html and script:

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

Note that 'fileSelect' and 'uploadButton' are receiving their elements and are not null.

For some reason form is not able to getElement.

I've seen several similar questions, but it seems like I am doing the right thing. Let me know if you have any suggestions.

Thanks in advance.

EDIT: I should add that this demo is in an ASP .ascx User Control Form. kami-sama's Code Snippet worked perfectly fine, but it will not do the same in my solution.

I log the 'form' variable after getElementById and it returns null and does not proceed past the form.onsubmit = function(event) line.

• javascript
• jquery
• html
• ascx

Share Improve this question Follow edited Jun 16, 2015 at 13:59 terbubbs asked Jun 16, 2015 at 13:43 terbubbsterbubbs 1,51222 gold badges2525 silver badges5050 bronze badges 2

• 2 Aren't you missing a closing bracket (}) for the onsubmit function? – Glorfindel Commented Jun 16, 2015 at 13:46
• yes I am @Glorfindel. Fortunately, that exists in my source. thanks anyway. – terbubbs Commented Jun 16, 2015 at 13:52

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

You should declare that your form will be handling uploaded files by adding the enctype="multipart/form-data"

w3 w3schools

I just added closing bracket to your code and it's working just fine in StackOverflow code snippet and in Firefox with html file.

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>

本文标签： javascripthtml input fileupload returning nullStack Overflow