On file input change submit form with formdata to php file and upload image file

Question

i want to submit the formData to my php file on input change function. But i Cant get it working perhaps im thinking wrong could someone please help me out.

The Form HTML

  <form id="image1submit" action="website_refimage1_upload.php" method="post" enctype="multipart/form-data">
  <div class="image-upload">
  <label for="uploadImage1">
    <img class="user-image width100" src="<?php echo $image?>"/>
  </label>

  <input class="file-input" id="uploadImage1" type="file" accept="image/*" name="image1"  />
</div>
</form>

The JQuery

    $("#uploadImage1").on('change',(function(e) {
  const form = $('#image1submit').get(0);
const formData = new FormData(form);
  //e.preventDefault();
  $('#image1submit').submit();

  //var file = $(this).val();
  $.ajax({
         url: "website_refimage1_upload.php",
   type: "POST",
   data:  formData,
   contentType: false,
         cache: false,
   processData:false,
   beforeSend : function()
   {
    //$("#preview").fadeOut();
    //$("#err").fadeOut();
   },
   success: function(data)
      {
    if(data=='invalid')
    {
     // invalid file format.
     //$("#err").html("Invalid File !").fadeIn();
    }
    else
    {
     // view uploaded file.
     //$("#preview").html(data).fadeIn();
     $("#form")[0].reset(); 
    }
      },
     error: function(e) 
      {
    //$("#err").html(e).fadeIn();
      }          
    });
 }));

He gives me the following Error also tried to fix but couldn`t get it to work sadly.

Uncaught TypeError: Failed to construct 'FormData': parameter 1 is not of type 'HTMLFormElement'.

Answer 1

The error tells you that the value passed to new FormData() is not a <form> element. Instead of passing this , select your form element and pass that to the constructor.

const form = $('#image1submit').get(0);
const formData = new FormData(form);

Answer 2

Try this

  $("#uploadImage1").on('change',(function(e) {
        $('#image1submit').submit();
  });

  $('#image1submit').on('submit',function(event){
        event.preventDefault();

        $.ajax({
           url: "website_refimage1_upload.php",
           type: "POST",
           data:  new FormData(this),
           contentType: false,
          cache: false,
          processData:false,
          beforeSend : function()
          {
          },
          success:function(data)
          {
          }
        });
   });

Answer 3

I don't get why you do a normal form post AND again post it with ajax?

Could you try by removing this piece of code: $('#image1submit').submit();

The rest of your code seems fine.

I also tested your code with a few changes and console logs, and for me everything works:

$("#uploadImage1").on("change", function (e) {
  const form = $("#image1submit").get(0);
  const formData = new FormData(form);
  //e.preventDefault();
  console.log(...formData);
  //$("#image1submit").submit();
  //var file = $(this).val();
  $.ajax({
    url: "http://google.com",
    type: "POST",
    data: formData,
    contentType: false,
    cache: false,
    processData: false,
    beforeSend: function () {
      //$("#preview").fadeOut();
      //$("#err").fadeOut();
    },
    success: function (data) {
      if (data == "invalid") {
        // invalid file format.
        //$("#err").html("Invalid File !").fadeIn();
      } else {
        // view uploaded file.
        //$("#preview").html(data).fadeIn();
        $("#form")[0].reset();
      }
    },
    error: function (e) {
      //$("#err").html(e).fadeIn();
      console.log('error:',e);
    }
  });
});