Загрузите файл, используя ajax для PHP, используя: TypeError - PullRequest
Новая
       9

Загрузите файл, используя ajax для PHP, используя: TypeError

0 голосов
/ 21 октября 2019

Я на самом деле пытаюсь загрузить файл изображения с помощью метода jQuery ajax. Но у меня все еще есть две ошибки. Форма такая большая и имеет несколько входных файлов. Цель состоит в том, чтобы загружать файлы во время ввода пользователем текста в другие поля. Таким образом, кнопка «Отправить» используется для действия, действие основано на выборе изображения. Когда изменяется один входной файл, код AJAX должен работать.

Я пытался найти решение для стекового потока, так как в течение 1 часа менялось несколько синтаксисов, но ничего не работало.

Мой код здесь 

<form id="form_animation" method='post' enctype='multipart/form-data' accept-charset='UTF-8' action=''>
    <!-- something like 2 fieldsets and 15 input before my input file -->
    <input type="file" name="animation_01_file" id="animation_01_file" data-line="1" accept="image/*">
   <!-- few others input -->
</form>

jQuery side 

$("input[type='file']").on('change', function(){

    var form = $(this).get(0);
    var fd = new FormData(form);

    /*var file = $(this).prop('files')[0];
    var fd = new FormData();
    console.log(file);
    fd.append('file', file);*/

    /* var fd = new FormData( $('#form_animation')[0] );
    ===> return error type 'append'
    */


    $.post(
    "traitements_ajax.php", {
        data: fd,
        processData: false,
        contentType: false,
                cache: false
    },
        function myResult(text_result){
            //some results here
        },
        "text"
    );

Вы можете увидеть другую попытку в комментарии.

Ошибки всегда:

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

или

TypeError: Аргумент 1 из FormData.constructor не реализует интерфейс HTMLFormElement.

Действительно спасибо за ваше время.

Ответы [ 2 ]

0 голосов
/ 21 октября 2019

Вы должны использовать свой <form> идентификатор здесь: 

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

Здесь, this означает, что вы пытаетесь получить type="file" данные, которые неверны.

вам нужночтобы использовать здесь свой идентификатор формы как: 

var form = $("#yourFormID").get(0);

Пример вашей формы: 

<form id="yourFormID" enctype="multipart/form-data">......

Или просто простое использование: 

var fd = new FormData($("#yourFormID")[0]);

Несколько полезных ссылок:

что означает $ (this) в jquery

0 голосов
/ 21 октября 2019 

var dataPost = new FormData($("#formId")[0]);
  var url = "traitements_ajax.php";
  $.ajax({
     url: url,
     method: "POST",
     data:dataPost,
     success:function(result){
      
  }, 
  cache: false,
    contentType: false,
    processData: false,
    error:function(error) {

    }   
  });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form id="formId" method="post" enctype="multipart/form-data">
<input type="file" name="animation_01_file" id="animation_01_file" data-line="1" accept="image/*">
</form>

Недавно со мной произошла такая же проблема. Вот мой кодЭто работает для меня. Пожалуйста, отметьте, если это полезно для вас.

поместите кнопку загрузки файла в форму.

...