Как загрузить несколько файлов с помощью Ajax и Explorer

Question

Как я могу загрузить несколько файлов с AJAX при просмотре?

Это мой HTML:

<p><input class="browse" type="button" value="Browse" onclick="file_explorer();"></p>
<input type="file" id="selectfile" multiple> 

И JS:

function file_explorer() {
        document.getElementById('selectfile').click();
        document.getElementById('selectfile').onchange = function() {
            for (var i=0; i< e.dataTransfer.files.length;i++){ // multiple files
              fileobj = document.getElementById('selectfile').files[i];
              ajax_file_upload(fileobj);
            }
        };
    }

 function ajax_file_upload(file_obj) {
    if(file_obj != undefined) {
        var form_data = new FormData(); 
        form_data.append('file', file_obj);
      $.ajax({

        type: 'POST',
        url: 'ajax.php',
        contentType: false,
        processData: false,
        data: form_data,

        success:function(response) {
          $(".success").html(response);
          $('#selectfile').val('');

        }

      });
    }
  }

Это ниже, отлично работает для 1 файла:

function file_explorer() {
        document.getElementById('selectfile').click();
        document.getElementById('selectfile').onchange = function()                 
              fileobj = document.getElementById('selectfile').files[0];
              ajax_file_upload(fileobj);

        };
    }

Для нескольких я пробовал это, но, к сожалению, это не работает:

function file_explorer() {
        document.getElementById('selectfile').click();
        document.getElementById('selectfile').onchange = function() {
            for (var i=0; i< e.dataTransfer.files.length;i++){
              fileobj = document.getElementById('selectfile').files[i];
              ajax_file_upload(fileobj);
            }
        };
    }

Как я могу сделать это правильно для нескольких файлов?

Answer 1

Я могу заставить это работать, внеся небольшие изменения в ваш код: 1. не определен - так что пусть e = document.getElementById ('selectfile') 2. замените e.dataTransfer.files.length на e.files.length

Answer 2

Хорошо, с вашим кодом вы получили ошибку e не определена, поэтому вы можете изменить e.dataTransfer с помощью this .. см. Пример ниже

document.getElementById('selectfile').onchange = function() {
  for (var i=0; i< this.files.length;i++){
    fileobj = document.getElementById('selectfile').files[i];
    console.log(fileobj.name);
    //ajax_file_upload(fileobj);
  }
};

<input type="file" id="selectfile" multiple>