Я пытаюсь отправить форму с использованием 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); } }); });
и я получаю такую ошибку в 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
Что я здесь делаю неправильно? пожалуйста, помогите мне
Не передавайте файлы в конструктор, но используйте append, например:
var formData = new FormData(); formData.append('file', $('input[type=file]')[0].files[0]); data: formData
Вы также можете использовать этот подход.
var form = $('form').get(0);
этот код возвращает объект jQuery ( $('form') ) и передает HTML-элемент в FormData ( get(0) ).
затем в ajax-запросе: data: new FormData(form),
Вы передаете this конструктору FormData . В этом контексте this кнопка нажата, идентифицированная в сообщении об ошибке как HTMLFormElement .
Согласно документации конструктор FormData ожидает элемент form . Поэтому вам нужно изменить свой код соответственно:
var form = $("#uploadXls"); $ajax({ ... data: new FormData(form), .... });
может быть, эта страница вам поможет .. 🙂
<!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>