Javascript 以 html 形式中断文件上传

Question

I have a file upload form that checks the extension of the uploaded file, it works ok until I add a javascript that shows a "LOADING...." message, which always makes the error of wrong extension comes up, even though it is an allowed one.

form.html

<form id="loader" action="uploadfile.php" method="post" enctype="multipart/form-data" onsubmit="return loading();" />
<label>Upload file:</label>
<input type="file" name="file" id="file" />
<input name="upload" type="submit" />
<input name="action" type="hidden" value="upload" />
</form>
<script>
  function loading() {
    document.getElementById("loader").innerHTML = "<div style='color: red;'>LOADING....</div>";
  }
</script>

uploadfile.php

<?php
$allowedExts = array("txt", "TXT");
$temp = explode(".", $_FILES["file"]["name"]);
$extension = end($temp);
if (in_array($extension, $allowedExts))
  {
  if ($_FILES["file"]["error"] > 0)
    {echo $_FILES["file"]["error"]; }
  else
      {
      move_uploaded_file($_FILES["file"]["tmp_name"],
      "upfiles/thefile.txt");
?>

Answer 1

Thanks to @Teemu's answer I could achieve the expected behaviour, I just moved the id from the form element to a div and that did it, here's the new code:

<form action="uploadfile.php" method="post" enctype="multipart/form-data" onsubmit="return loading();" />
<label>Upload file:</label>
<input type="file" name="file" id="file" />
<input name="upload" type="submit" />
<input name="action" type="hidden" value="upload" />
<div id="loader"></div></form>
<script>
  function loading() {
    document.getElementById("loader").innerHTML = "<div style='color: red;'>LOADING....</div>";
  }
</script>