0

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();
             }
        });
    });

1 respuesta 1

1

debes pasar la data del form no el bottom:

cambiar:

data:new FormData($("#submit_agregar_producto")[0]),

por

data:new FormData($("#form_agregar_producto")),

en el $.ajax

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.