Ошибка при отправке файла формы с помощью формы с помощью AJAX

Я пытаюсь отправить форму с использованием AJAX, содержащего файл CSV. Поэтому идея отправляет форму с помощью ajax, обрабатывает ее в другом файле, создавая таблицу и возвращая обработанную таблицу обратно на страницу.

Что у меня есть,

<form id="uploadXls" action="" method="post" enctype="multipart/form-data">
      <input id="uploaderFile" type="file" class="file"><br/>
      <button type="button" class="btn btn-orange pull-right" name="btnSubmit" id="btnSubmit"><i class="fa fa-download"></i> SHOW FILE CONTENT</button>
</form>

и JavaScript есть,

$("#btnSubmit").click(function(){
            $.ajax({
                type: 'POST',
                url: '../../content/maindiv_content/drawing/divpages/process_xls_file.php',
                data: new FormData(this),
                contentType: false,
                cache: false,
                processData: false,
                success: function (response, textStatus, jqXHR) {
                  $("#showFileContentTable").html(data);
                }
            });
        });

и im получаю такую ошибку в firebug,

TypeError: Argument 1 of FormData.constructor does not implement interface HTMLFormElement.
http://infserver/WeltesTankage/dist/js/jquery-1.10.2.min.js line 4 > eval
Line 14

Что я здесь делаю неправильно? Пожалуйста, помогите мне

Ответ 1

Не передавайте файлы в конструктор, но используйте append, например:

var formData = new FormData();
formData.append('file', $('input[type=file]')[0].files[0]);
data:  formData

Ответ 2

Вы также можете использовать этот подход.

var form = $('form').get(0);

этот код возвращает объект jQuery ($('form')) и передает элемент HTML в FormData (get(0)).

то в запросе ajax: data: new FormData(form),

Ответ 3

Вы передаете this в конструктор FormData. В этом контексте this находится нажатая кнопка, идентифицированная в сообщении об ошибке как HTMLFormElement.

Согласно документации конструктор FormData ожидает элемент form. Поэтому вам нужно изменить свой код соответственно:

 var form = $("#uploadXls");

 $ajax({
     ...
     data: new FormData(form),
     ....
 });

Ответ 4

может быть эта страница поможет вам..:)

<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous">
  </script>
</head>
<body>
  <form method="post" id="fileinfo" enctype="multipart/form-data">
    file <input type="file" name="slug"><br>
     <input type="button" id="uploadBTN" value="Stash the file!"></input>
  </form>
<script type="text/javascript">
    $(document).ready(function()
  {
      $('#uploadBTN').on('click', function()
      { 
        var form = $('form').get(0); 
        console.log(form);
        var fd = new FormData(form);
        fd.append('user_id',4);
        fd.append('user_media_category_id',1);
        //console.log(fd);
        fd.append("user_", "This is some extra data");
        $.ajax({
            url: 'http://localhost/yii2/voila/project/api/web/v1/user-media/new',  
            type: 'POST',
            data: fd,
            success:function(data){
                console.log(data);
            },
            error:function(data){
                console.log(data);
            },
            cache: false,
            contentType: false,
            processData: false
        });
    });
    });
</script>
</body>
</html>