Estoy tratando de enviar un formulario mediante post con un campo tipo file para subir una foto .
El problema es que no puedo enviar la imagen cargada y aparece el siguiente error :
"TypeError: Argument 1 of FormData.constructor does not implement interface HTMLFormElement" .
Alguien sabe a que se debe y como solucionarlo?.Soy bastante nuevo en esto asi que estoy experimentando pero no encuentro la razón de este error
El formulario está echo con html y php .L carga del formulario queincluye el campo file está hecho con Ajax y Jquery:
<form action="" method="post" id="form_agregar_producto" enctype="multipart/form-data" >
<h5 class="text-center text-info">Formulario</h5>
<div class="form-group">
<label for="producto" class="text-white">Producto</label>
<input type="text" class="form-control" id="producto" name="producto" placeholder="Nombre del producto" value="" >
</div>
<div class="form-group">
<label for="precio" class="text-white">Precio</label>
<input type="number" class="form-control" id="precio" placeholder="Precio del producto" name="precio">
</div>
<div class="form-group">
<label for="cantidad" class="text-white">Cantidad</label>
<input type="number" class="form-control" id="cantidad" name="cantidad" placeholder="Cantidad del producto">
</div>
<div class="photo">
<label for="imagen" class="text-white">Imagen</label>
<div class="prevPhoto">
<span class="delPhoto notBlock">X</span>
<label for="imagen"></label>
</div>
<div class="upimg">
<input type="file" name="imagen" id="imagen">
</div>
<div id="form_alert"></div>
</div>
<button class="btn btn-primary btn-lg btn-block mt-2 mb-3" id="submit_agregar_producto" type="submit"><i class="fas fa-save"></i> Enviar formulario</button>
</form>
Aqui el jquery:
$("#submit_agregar_producto").click(function (e) {
e.preventDefault();
if($('#proveedor').val() == '' || $('#producto').val()=='' || $('#precio').val()=='' || $('#cantidad').val()=='')
{
$('#alerta').html('<p class="mal">Complete todos los campos</p>').show();
return false;
}
$.ajax({
url:"registro-producto.php",
type:"post",
processData:false,
contentType:false,
cache:false,
data:new FormData($("#submit_agregar_producto")[0]),
dataType:"text",
beforeSend:function(){
$('#loader').show();
},
success:function(r){
console.log(r);
r=r.trim();
if(r == 'errorDatos'){
$('#alerta').html('<p class="mal">Error al registrar el producto</p>').show();
}
if(r == 'save'){
$('#alerta').html('<p class="bien">Producto agregado correctamente</p>').show();
// limpia el formulario si se inserto correctamente
$('#form_agregar_producto').trigger("reset");
}
},
error: function(r){
console.log("Error",r);
},
// se ejecuta sin importa si falla o no
complete: function() {
$('#loader').hide();
}
});
});