0

Estimados tengo el siguiente formulario tipo modal

<div class="modal fade border-0" id="form-conformado" data-backdrop="static">
    <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
        <div class="modal-content formularios">
            <div class="modal-header">
                <h5 class="modal-title"><i class="icon-add-to-list icon-titulo"></i>Registro ID Conformado</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close" onclick="borrar_inputs();"><span aria-hidden="true">&times;</span></button>
            </div>
            <div class="modal-body">
                <div class="form-row">                      
                    <div class="form-group col-lg-2 col-6">
                        <label for="id">ID</label>
                        <input type="text" class="form-control form-control-resp" name="id" id="id" style="text-transform:uppercase;" onkeyup="javascript:this.value=this.value.toUpperCase();">
                    </div>    
                    <div class="form-group col-lg-3 col-6">
                        <label for="fecha">Fecha</label>
                        <input type="text" class="form-control form-control-resp" name="fecha" id="fecha" value="<?php echo date("d-m-Y");?>">
                    </div>              
                    <div class="form-group col-lg-7 col-12 input_producto"></div>           
                    <div class="form-group col-lg-3 col-5">
                        <label for="produccion">Producción</label>
                        <input type="text" class="form-control form-control-resp" name="produccion" id="produccion" value="0">
                    </div>              
                    <div class="form-group col-lg-3 col-7 input_maquina"></div> 
                                        
                    <div class="form-group col-lg-6 col-12">
                        <label for="operador">Operador</label>
                        <input type="text" class="form-control form-control-resp" name="operador" id="operador" style="text-transform:uppercase;" onkeyup="javascript:this.value=this.value.toUpperCase();" autocomplete="off" onClick="this.select();">
                        <div class="listado_operadores reg_operadores"></div>           
                    </div>                  
                    <div class="form-group col-lg-5 col-12">
                        <label for="observaciones">Observaciones</label>
                        <textarea class="form-control" name="observaciones" id="observaciones" cols="30" rows="3" style="text-transform:uppercase;" onkeyup="javascript:this.value=this.value.toUpperCase();"></textarea>
                    </div>                                  
                </div>                          
            </div>              
            <div class="modal-footer p-1">
                <button type="button" class="btn btn-sm btn-primary" id="actualizar-registros"><h5 class="icon-spinner11 m-0"></h5></button>
                <button type="button" class="btn btn-sm btn-success" id="insertar-registros"><h5 class="icon-save m-0"></h5></button>               
            </div>
        </div>
    </div>
</div>

Uso Ajax para enviar los datos de la siguiente forma

 function insertar_registros(){     
        var action = 'fetch_data';   
        var id = document.getElementById("id").value;
        var codigoproducto = document.getElementById("producto").value;  
        var largo = codigoproducto.length;
        var posicion = codigoproducto.indexOf("]");
        var codigo = codigoproducto.substr(1,posicion-1);
        var producto = codigoproducto.substr(posicion+4,largo-posicion-4);
        var produccion = document.getElementById("produccion").value;        
        var maquina = document.getElementById("maquina").value;    
        var operador = document.getElementById("operador").value;
        var fecha = document.getElementById("fecha").value; 
        var observaciones = document.getElementById("observaciones").value; 
        $.ajax({        
            url:"<?php echo $raiz;?>registrar/registrar_id_conformado.php", 
            method: "POST",
            dataType: "json",
            data:{action:action,id:id,codigo:codigo,producto:producto,produccion:produccion,maquina:maquina,operador:operador,fecha:fecha,observaciones:observaciones},        
            success:function(data){
                if(data.html1 == 'Registro realizado exitosamente'){                        
                    borrar_inputs();                    
                    mostrar_registros();
                    $('#registro_correcto').modal('show');  
                }else if(data.html1 == 'Existen campos vacios que deben ser llenados'){
                    $('#faltan_datos').modal('show');                               
                }else if(data.html1 == 'El ID ya existe'){
                    $('#registro_duplicado').modal('show');                                                 
                }  
            }
        });             
    }

Recibo los datos en php de forma normal con

$_POST['nombre'];

Quiero agregar en el mismo formulario un input para subir imagenes

<input type="file" accept="image/*" name="imagenes[]" id="imagenes" multiple>     

Usando la misma funcion ajax quiero pasar las imagenes a subir, pero no se como pasarlas en la parte de data, para luego recibirlas en php, todo junto quedaria asi hasta el momento

function insertar_registros(){      
        var action = 'fetch_data';   
        var id = document.getElementById("id").value;
        var codigoproducto = document.getElementById("producto").value;  
        var largo = codigoproducto.length;
        var posicion = codigoproducto.indexOf("]");
        var codigo = codigoproducto.substr(1,posicion-1);
        var producto = codigoproducto.substr(posicion+4,largo-posicion-4);
        var produccion = document.getElementById("produccion").value;        
        var maquina = document.getElementById("maquina").value;    
        var operador = document.getElementById("operador").value;
        var fecha = document.getElementById("fecha").value; 
        var observaciones = document.getElementById("observaciones").value; 
        var archivos = document.getElementById('imagenes');
        var archivo = archivos.files;
        var imagenes = new FormData();
        for(i=0;i<archivo.length,i++){
            imagenes.append('archivo'+i,archivo[i]);            
        }
        $.ajax({        
            url:"<?php echo $raiz;?>registrar/registrar_id_conformado.php", 
            method: "POST",
            dataType: "json",
            data:{action:action,id:id,codigo:codigo,producto:producto,produccion:produccion,maquina:maquina,operador:operador,fecha:fecha,observaciones:observaciones},        
            success:function(data){
                if(data.html1 == 'Registro realizado exitosamente'){                        
                    borrar_inputs();                    
                    mostrar_registros();
                    $('#registro_correcto').modal('show');  
                }else if(data.html1 == 'Existen campos vacios que deben ser llenados'){
                    $('#faltan_datos').modal('show');                               
                }else if(data.html1 == 'El ID ya existe'){
                    $('#registro_duplicado').modal('show');                                                 
                }  
            }
        });             
    }

Estoy estancado en la parte de Data en Ajax y en como recibir despues esas imagenes en php, como puedo hacerlo ?

1 respuesta 1

-1

Para enviar archivos por medio de una peticion http debes hacerlo con FormData es decir, agregar todos tus datos a un objeto FormData incluido el o los archivos y enviar ese objeto con otros parametros mas en las configuraciones de esa consulta ajax, es decir en el parametro data solo enviarias el FormData.

adicionalmente deber agregar estos parametros a las configuraciones de esa consulta.

processData: false,
contentType : false

quedando de la siguiente manera

$.ajax({        
        url:"<?php echo $raiz;?>registrar/registrar_id_conformado.php", 
        method: "POST",
        dataType: "json",
        processData: false,
        contentType: false,
        data:FormData, //el nombre del objeto FormData que hayas creado con todos los dastos y archivos

    });
1
  • Es una buena respuesta, pero incompleta. ¿Porqué no das un ejemplo de cómo adjuntar una imagen al objeto FormData? el 17 oct. 2020 a las 15:08

Tu Respuesta

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

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