html input fileupload return null

Question

Я пытаюсь сделать демонстрацию, включающую загрузчик входных файлов 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» получают свои элементы и не нулевой.

По какой-то причине форма не может получить элемент.

Я видел несколько похожих вопросов, но кажется, что я поступаю правильно. Дайте мне знать, если у вас есть предложения.

Заранее спасибо.

EDIT: Я должен добавить, что эта демонстрация находится в форме пользовательского контроля ASP .ascx. Код фрагмента кода kami-sama работал отлично, но в моем решении он не будет делать то же самое.

Я записываю переменную 'form' после getElementById и возвращает null и не проходит мимо строки form.onsubmit = function (event).

Answer 1

Вы должны заявить, что ваша форма будет обработка загруженных файлов путем добавления enctype="multipart/form-data"

w3 w3schools

Answer 2

Я просто добавил закрывающая скобка в код и он работает просто отлично в StackOverflow фрагменте кода и в Firefox с html-файлом.

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>