Upload a file using ajax for PHP using: TypeError

49
October 22, 2019, at 3:10 PM

I'm actually try to upload an image file by using jQuery ajax method. But I still have two errors. The form is so big and have multiple input file. The goal is to upload files during the time user type in other fields. So, the submit button is used for the action, the action is based on image selection. When one input file change, the AJAX code must work.

I tried to find a solution on stackoverflow since 1h turning around few differents syntaxes but nothing work.

My code is here

<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"
    );

You can see an other try in comment.

Errors are always :

TypeError: 'append' called on an object that does not implement interface FormData.

or

TypeError: Argument 1 of FormData.constructor does not implement interface HTMLFormElement.

Really thank you for your time.

Answer 1

You need to use your <form> id here:

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

Here, this means you are trying to get type="file" data which is wrong.

you need to use your form id here as like:

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

Your form example:

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

Or, just simple use:

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

Some useful link:

what does $(this) mean in jquery

Answer 2

var dataPost = new FormData($("#userForm")[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"> 
<input type="file" name="animation_01_file" id="animation_01_file" data-line="1" accept="image/*"> 
</form>

Recently same problem happened to me. Here is my code. It's working for me. Please check if useful to you.

put file upload button in a form.

READ ALSO
Javascript is sorting part of the array

Javascript is sorting part of the array

I tried to find something about my problem but I haven't found anything yet

19
Submitting Form Data via Ajax to Google Forms on mobile devices

Submitting Form Data via Ajax to Google Forms on mobile devices

I have a form on our website submitting fine through html submit to google forms to google sheetsOn mobile devices it fails to submit the data, without any console problems

29
How to print my radio buttons and input type text in my textarea?

How to print my radio buttons and input type text in my textarea?

I have questionnaire with four radio buttons and one input type textPrint in sequence without deleting the previous one

40
Same bot on multiple page [on hold]

Same bot on multiple page [on hold]

I have created a chatbot on my website and what I want to do is, if I already had some chats with my chatbot and then I navigate to different pages on my website then chatbot should remember the chats and show all the contents in the chatbot in the navigated...

23