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">×</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 ?