[Olga27]

Нашла в интернете исходники где сделано загрузку файла. В консоле отображается прогресс (сколько в процентах загрузилось). Все это происходит при изменении поле input (change), вот пример кода.

<input type="file" name="afile" id="afile"/>


<script>

document.querySelector('#afile').addEventListener('change', function(e) 
{
//document.getElementById('upload-form').addEventListener('submit', function(e)( 
 e.preventDefault();
//document.querySelector('#afile').addEventListener('change', function(e) {
  var file = this.files[0];

  var fd = new FormData();
  fd.append("afile", file);
  // These extra params aren't necessary but show that you can include other data.
  fd.append("username", "Groucho");
  fd.append("accountnum", 123456);

  var xhr = new XMLHttpRequest();
  xhr.open('POST', 'handle_file_upload.php', true);
  
  xhr.upload.onprogress = function(e) {
    if (e.lengthComputable) {
      var percentComplete = (e.loaded / e.total) * 100;
      console.log(percentComplete + '% uploaded');
    }
  };

  xhr.onload = function() {
   console.log(this.responseText);
   // if (this.status == 200) {
    //  var resp = JSON.parse(this.response);

     // console.log('Server got:', resp);

    //  var image = document.createElement('img');
    //  image.src = resp.dataUrl;
    //  document.body.appendChild(image);
    //};
  };

  xhr.send(fd);
}, false);
</script>

</body>
</html>

Код выше работает. Пытаюсь его переделать, чтобы все это происходило через нажатии кнопки submit, но почему-то ничего не происходит файл не грузится, мой переделанный код.

<form method="post" name="upload" id="upload-form"><div>
<input type="file" name="afile" id="afile"/>
<input class="in_input" type="submit" value="Загрузить"></div>
</form>  

<script>

document.getElementById('upload-form').addEventListener('submit', function(e)
{
console.log("Test");
 var file = this.files[0];

  var fd = new FormData();
  fd.append("afile", file);
  // These extra params aren't necessary but show that you can include other data.
  fd.append("username", "Groucho");
  fd.append("accountnum", 123456);

  var xhr = new XMLHttpRequest();
  xhr.open('POST', 'handle_file_upload.php', true);
  
  xhr.upload.onprogress = function(e) {
    if (e.lengthComputable) {
      var percentComplete = (e.loaded / e.total) * 100;
      console.log(percentComplete + '% uploaded');
    }
  };
  
   xhr.onload = function() {
   console.log(this.responseText);
   // if (this.status == 200) {
    //  var resp = JSON.parse(this.response);

     // console.log('Server got:', resp);

    //  var image = document.createElement('img');
    //  image.src = resp.dataUrl;
    //  document.body.appendChild(image);
    //};
  };

   xhr.send(fd);
}, false);
</script>

</body>
</html>

Как можно исправить, чтобы при выборе файла и нажатии submit он грузился в папку?