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

Я пытаюсь отправить форму, используя AJAX, содержащий файл CSV. Поэтому идея отправляет форму с помощью ajax, обрабатывает ее в другом файле, создавая таблицу и возвращая обработанную таблицу обратно на страницу.Ошибка при отправке файла формы с помощью формы с использованием 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); 
       } 
      }); 
     });

и им получать такого рода ошибки в поджигатель,

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

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

источник

2015-03-05 Konz Mama

'this' относится к кнопке, а не форма, как и где вы улавливаете щелчок мероприятие. – jeroen

Со мной я случайно присвоил свою форму тому же идентификатору, что и другой элемент, и запрос AJAX пытался использовать другой элемент, который не был объектом формы. –

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

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

источник

2015-03-05 08:12:48 Naqeeb

Это хорошо работает. спасибо большое @Naqeeb –

'TypeError: 'append' вызывается для объекта, который не реализует интерфейс FormData.'. хорошо ... – Blauhirn

И как я могу поместить другие данные из формы? – Sertage

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

В соответствии с documentation конструктор FormData ожидает элемент form. Поэтому вам необходимо соответствующим образом изменить свой код:

var form = $("#uploadXls"); 

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

источник

2015-03-05 08:14:04 jurgemaister

все еще имеет ошибку: ReferenceError: formData не определен http: //infserver/WeltesTankage/dist/js/jquery-1.10.2.min.js строка 4> eval Строка 15 –

@KonzMama Извините, опечатка. FormData должен иметь капитал F, конечно – jurgemaister

все еще имеет ошибку, это мой фрагмент кода 'var form = $ (" # uploadXls "); $ .ajax ({ типа: 'POST', данные: новые FormData (форма), URL: '../../ содержание/maindiv_content/рисунок/divpages/process_xls_file.php', ' –

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

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

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

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

источник

2015-10-05 18:55:44 WhiteOne

Это требует более – Chris

yes;) и вы можете сбросить все поле формы, добавив это в функцию успеха: '$ ('# FormID') [0] .reset();' это тоже может помочь кому-то :) – WhiteOne

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

<!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>

источник

2016-11-23 07:33:11

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

ответ

Смежные вопросы