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'.
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);
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)
{
}
});
});
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);
}
});
});