Les dejo un ejemplo básico en donde vemos como meter las imágenes en un campo en la base de datos en lugar de guardarlo en el filesystem.
Saludos espero que les sirva
HTML MODAL
<!--=====================================
MODAL IMAGENES
======================================-->
<div id="modalImagenesVehiculos" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<form role="form" method="post" enctype="multipart/form-data">
<!--=====================================
CABEZA DEL MODAL
======================================-->
<div class="modal-header" style="background:#3c8dbc; color:white">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title"> Imagenes </h4>
</div>
<!--=====================================
CUERPO DEL MODAL
======================================-->
<div class="modal-body">
<div class="box-body">
<!-- EMPEZAMMOS CON LAS PESTAÑAS -->
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#Subir">Subir Imagenes</a></li>
<li><a data-toggle="tab" href="#Imagenes">Imagenes</a></li>
</ul>
<!-- CONTENIDO DE LAS PESTAÑAS -->
<div class="tab-content">
<div id="Subir" class="tab-pane fade in active">
<h3>Subir Imagen</h3>
<p>
<!-- ENTRADA PARA SUBIR FOTO -->
<div class="form-group">
<input type="file" class="nuevaFoto" name="editarFoto" id="editarFoto">
<p class="help-block">Peso máximo de la foto 2MB</p>
<img src="vistas/img/plantilla/imagenesDocumentos.jpeg" class="img-thumbnail previsualizarEditar" width="100px">
</div>
<!-- ENTRADA PARA LA DESCRIPCION -->
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">Descripcion: </span>
<input type="text" class="form-control input-lg" name="descripcionImagen" id="descripcionImagen" placeholder="Ingresar Descripcion" required>
<input type="hidden" class="form-control input-lg" name="idVehiculo" id="idVehiculo" name="idVehiculo">
</div>
</div>
</div>
<div id="Imagenes" class="tab-pane fade">
<h3>Imagenes</h3>
<p>
<!--=====================================
CONTROLES
======================================-->
<table class="table table-bordered table-striped dt-responsive tablaImagenesVehiculos" width="100%">
<thead>
<tr>
<th style="width:10px">ID</th>
<th>Descripción</th>
<th>Imagen </th>
<th>Acciones </th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>9000</td>
<td>1000</td>
<td>1000</td>
</tr>
</tbody>
</table>
</div>
</div>
</p>
</div>
</div>
<!--=====================================
PIE DEL MODAL
====================================== -->
<div class="modal-footer">
<button type="button" class="btn btn-default pull-left" data-dismiss="modal">Salir</button>
<button type="button" class="btn btn-primary guardarImagen">Guardar</button>
</div>
</form>
</div>
</div>
</div> Código Javascript
//SUBIR IMAGENES
$(".modal-footer").on("click", ".guardarImagen", function () {
console.log("Prueba");
//VALIDADACIONES
if ($("#descripcionImagen").val() == "") {
swal({
type: "error",
title: "Falta Capturar la Descripcion",
showConfirmButton: true,
confirmButtonText: "Cerrar"
})
return;
}
//VERIFICA SI ESCRIBIO EL CORREO ELECTRONICO
if ($(".nuevaFoto").val() == "") {
swal({
type: "error",
title: "Falta capturar la foto",
showConfirmButton: true,
confirmButtonText: "Cerrar"
})
return;
}
$(".guardarImagen").attr("disabled",true);
$(".guardarImagen").html("Guardando...");
//SUBIR ARCHIVO
var descripcionImagen = $("#descripcionImagen").val();
var imagen = $(".nuevaFoto").prop("files")[0];
var idVehiculo = $("#idVehiculo").val();
console.log("Imagen:", imagen);
var datosDocumento = new FormData();
datosDocumento.append("guardarImagenVehiculo", "guardarImagenVehiculo");
datosDocumento.append("descripcionImagen", descripcionImagen);
datosDocumento.append("idVehiculo", idVehiculo);
datosDocumento.append("imagen", imagen);
$.ajax({
url: "controladores/imagenVehiculos.controlador.php",
method: "POST",
data: datosDocumento,
cache: false,
contentType: false,
processData: false,
//dataType: "json",
success: function (respuesta) {
console.log(respuesta);
if (respuesta == "ok") {
swal({
type: "success",
title: "Guardado Correctamente",
showConfirmButton: true,
confirmButtonText: "Cerrar"
}).then(function (result) {
if (result.value) {
$(".guardarImagen").removeAttr("disabled");
$(".guardarImagen").html("Guardar");
$('.tablaImagenesVehiculos').DataTable().destroy();
cargaImagenesVehiculos(idVehiculo);
}
});
return;
} else {
if (respuesta.match(/Duplicate entry.*/)) {
swal({
type: "error",
title: "El UUID de documento ya esta en uso, favor de recargar la pagina",
showConfirmButton: true,
confirmButtonText: "Cerrar"
})
return;
}
$(".guardarImagen").removeAttr("disabled");
$(".guardarImagen").html("Guardar");
swal({
type: "error",
title: "" + respuesta + "",
showConfirmButton: true,
confirmButtonText: "Cerrar"
})
}
}
})
});
//TRAER LISTA DE IMAGENES EN DATATABLE
$(".tablaVehiculos").on("click", ".btnImagenesVehiculos", function () {
var idVehiculo = $(this).attr("idVehiculo");
$('.tablaImagenesVehiculos').DataTable().destroy();
$("#idVehiculo").val(idVehiculo);
console.log("asd");
cargaImagenesVehiculos(idVehiculo);
return;
});
//ELIMINAR IMAGEN
$(".tablaImagenesVehiculos").on("click", ".btnEliminarImagenVechiculo", function () {
var idImagen = $(this).attr("idimagenvehiculo");
var idVehiculo = $(this).attr("idVehiculo");
console.log("PRUEBA ELIMINAR:", idImagen);
swal({
title: '¿Está seguro de borrar la imagen?',
text: "¡Si no lo está puede cancelar la accíón!",
type: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
cancelButtonText: 'Cancelar',
confirmButtonText: 'Si, borrar venta!'
}).then(function (result) {
if (result.value) {
var datosDocumento = new FormData();
datosDocumento.append("eliminarImagenVehiculo", "eliminarImagenVehiculo");
datosDocumento.append("idImagen", idImagen);
$.ajax({
url: "controladores/imagenVehiculos.controlador.php",
method: "POST",
data: datosDocumento,
cache: false,
contentType: false,
processData: false,
//dataType: "json",
success: function (respuesta) {
console.log(respuesta);
if (respuesta == "ok") {
swal({
type: "success",
title: "Eliminado Corecctamente",
showConfirmButton: true,
confirmButtonText: "Cerrar"
}).then(function (result) {
if (result.value) {
$('.tablaImagenesVehiculos').DataTable().destroy();
cargaImagenesVehiculos(idVehiculo);
}
});
return;
}
}
})
}
})
return;
});
function cargaImagenesVehiculos(idVehiculo
)
{
var dataTable = $('.tablaImagenesVehiculos').DataTable({
"processing": true,
"serverSide": false,
"deferRender": true,
"retrieve": true,
"pageLength": 5,
"lengthMenu": [5, 10, 25, 50, 100, 150, 200],
"language": {
"sProcessing": "Procesando...",
"sLengthMenu": "Mostrar _MENU_ registros",
"sZeroRecords": "No se encontraron resultados",
"sEmptyTable": "Ningún dato disponible en esta tabla",
"sInfo": "Mostrando registros del _START_ al _END_ de un total de _TOTAL_",
"sInfoEmpty": "Mostrando registros del 0 al 0 de un total de 0",
"sInfoFiltered": "(filtrado de un total de _MAX_ registros)",
"sInfoPostFix": "",
"sSearch": "Buscar:",
"sUrl": "",
"sInfoThousands": ",",
"sLoadingRecords": "Cargando...",
"oPaginate": {
"sFirst": "Primero",
"sLast": "Último",
"sNext": "Siguiente",
"sPrevious": "Anterior"
},
"oAria": {
"sSortAscending": ": Activar para ordenar la columna de manera ascendente",
"sSortDescending": ": Activar para ordenar la columna de manera descendente"
}
},
"ajax": {
url: "ajax/datatable-imagenesVehiculo.ajax.php",
type: "POST",
data: {
tablaImagenVechiculos: "tablaImagenVechiculos",
idVehiculo1: idVehiculo
}
}
});
}
Archivo AJAX para datatable de las imagenes
<?php
require_once "../modelos/generales.modelo.php";
session_start();
if (!$_SESSION["iniciarSesion"]) {
return;
}
if(isset($_POST["tablaImagenVechiculos"])){
$idVehiculo = $_POST["idVehiculo1"];
$campos = " * ";
$where=" and a.idVehiculo = $idVehiculo ";
$nominas = ModeloGenerales::mdlMostrarTabla(" imagenesVehiculos ",$campos,$where);
if (count($nominas) == 0) {
echo '{"data": []}';
return;
}
$datosJson = '{
"data": [';
for ($i = 0; $i < count($nominas); $i++) {
$imagen="<img src='data:image/png;base64, ".base64_encode($nominas[$i]["imagen"])."' data-action='zoom' class='img-thumbnail' width='40px'>";
$botones = "<div class='btn-group'><button type='button' class='btn btn-danger btnEliminarImagenVechiculo' idVehiculo='" . $nominas[$i]["idVehiculo"] ."' idImagenVehiculo='" . $nominas[$i]["id"] ."'><i class='fa fa-trash-o'></i></button></div>";
$datosJson .= '[
"' . $nominas[$i]["id"] . '",
"' . $nominas[$i]["descripcion"] . '",
"'.$imagen.'",
"'.$botones.'"
],';
}
$datosJson = substr($datosJson, 0, -1);
$datosJson .= ']
}';
echo $datosJson;
}
imagenVehiculos.controlador.php
<?php
/*
* To change this license header, choose License Headers in Project Properties.
* To change this template file, choose Tools | Templates
* and open the template in the editor.
*/
/**
* Description of imagenVehiculos
*
* @author Julio Cesar Leyva Rodriguez
*/
class ControladorImagenVehiculos {
}
//GUARDA ESTADO DESDE SISTEMA
if (isset($_POST["guardarImagenVehiculo"])){
include "../modelos/conexion.php";
include "../modelos/imagenVehiculos.modelo.php";
date_default_timezone_set('America/Chihuahua');
if ((isset($_FILES['imagen'])) && ($_FILES['imagen'] != '')) {
$file = fopen($_FILES['imagen']['tmp_name'], "rb");
$fileName = "";
$fileExtension = "";
} else {
$file = "";
}
$datos["idVehiculo"]=$_POST["idVehiculo"];
$datos["descripcion"]=$_POST["descripcionImagen"];
$datos["imagen"]=$file;
$resultado = ModeloImagenVehiculos::mdlIngresarImagenesVehiculos("imagenesVehiculos", $datos);
echo $resultado;
}
//GUARDA ESTADO DESDE SISTEMA
if (isset($_POST["eliminarImagenVehiculo"])){
include "../modelos/conexion.php";
include "../modelos/imagenVehiculos.modelo.php";
date_default_timezone_set('America/Chihuahua');
$datos["id"]=$_POST["idImagen"];
$resultado = ModeloImagenVehiculos::mdlEliminarImagenVechiculo("imagenesVehiculos", $datos);
echo $resultado;
}imagenVehiculos.modelo.php
<?php
/*
* To change this license header, choose License Headers in Project Properties.
* To change this template file, choose Tools | Templates
* and open the template in the editor.
*/
/**
* Description of imagenVehiculos
*
* @author Julio Cesar Leyva Rodriguez
*/
require_once "conexion.php";
Class ModeloImagenVehiculos {
// INGRESA MOVIMIENTO DESDE SISTEMA
static public function mdlIngresarImagenesVehiculos($tabla, $datos) {
$stmt = Conexion::conectar()->prepare("INSERT INTO $tabla(idVehiculo
,descripcion
,imagen
)
VALUES (:idVehiculo
,:descripcion
,:imagen
)");
$stmt->bindParam(":idVehiculo", $datos["idVehiculo"], PDO::PARAM_STR);
$stmt->bindParam(":descripcion", $datos["descripcion"], PDO::PARAM_STR);
$stmt->bindParam(":imagen", $datos["imagen"], PDO::PARAM_LOB);
if ($stmt->execute()) {
return "ok";
} else {
$arr = $stmt->errorInfo();
return $arr[2];
}
$stmt->close();
$stmt = null;
}
static public function mdlEliminarImagenVechiculo($tabla, $datos) {
$stmt = Conexion::conectar()->prepare("delete from $tabla where id=:id
");
$stmt->bindParam(":id", $datos["id"], PDO::PARAM_INT);
if ($stmt->execute()) {
return "ok";
} else {
$arr = $stmt->errorInfo();
return $arr[2];
}
$stmt->close();
$stmt = null;
}
}
Cuando se requiere poner miles o cientos de miles de options en un select no es bueno ponerlos todos ya que la carga de la pagina y la pagina misma se pondría lenta
La mejor opción es ponerlo via ajax y solo muestre de 5 a 10 registros cuando se haga la busqueda, a continuación mostraremos como hacerlo, basado en el sistema de punto de venta POS 2021, usando el modelo vista controlador
Ejemplo
CREATE TABLE `unidadMedidasSAT` (
`id` bigint(20) NOT NULL,
`c_ClaveUnidad` varchar(3) DEFAULT NULL,
`Nombre` varchar(106) DEFAULT NULL,
`Descripción` varchar(551) DEFAULT NULL,
`Nota` varchar(221) DEFAULT NULL,
`Fecha de inicio de vigencia` varchar(10) DEFAULT NULL,
`Fecha de fin de vigencia` varchar(10) DEFAULT NULL,
`Símbolo` varchar(21) DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8;Insertando datos
INSERT INTO `unidadMedidasSAT` (`id`, `c_ClaveUnidad`, `Nombre`, `Descripción`, `Nota`, `Fecha de inicio de vigencia`, `Fecha de fin de vigencia`, `Símbolo`) VALUES
(1, '18', 'Tambor de cincuenta y cinco galones (EUA)', NULL, 'Las unidades marcadas como borradas en el catálogo internacional de UNECE, serán retenidas indefinidamente en las listas de códigos. En su caso, estas unidades podrán ser reinstalado a través del proceso de mantenimiento.', '13/08/2017', NULL, NULL),
(2, '19', 'Camión cisterna', NULL, 'Las unidades marcadas como borradas en el catálogo internacional de UNECE, serán retenidas indefinidamente en las listas de códigos. En su caso, estas unidades podrán ser reinstalado a través del proceso de mantenimiento.', '13/08/2017', NULL, NULL),
(3, '26', 'Tonelada real', NULL, 'Las unidades marcadas como borradas en el catálogo internacional de UNECE, serán retenidas indefinidamente en las listas de códigos. En su caso, estas unidades podrán ser reinstalado a través del proceso de mantenimiento.', '13/08/2017', NULL, NULL),
(4, '29', 'Libra por mil pies cuadrados', NULL, 'Las unidades marcadas como borradas en el catálogo internacional de UNECE, serán retenidas indefinidamente en las listas de códigos. En su caso, estas unidades podrán ser reinstalado a través del proceso de mantenimiento.', '13/08/2017', NULL, 'Lb / kft²'),
(5, '30', 'Día de potencia de caballos por tonelada métrica de aire seco', NULL, 'Las unidades marcadas como borradas en el catálogo internacional de UNECE, serán retenidas indefinidamente en las listas de códigos. En su caso, estas unidades podrán ser reinstalado a través del proceso de mantenimiento.', '13/08/2017', NULL, NULL),
(6, '31', 'Pescar', NULL, 'Las unidades marcadas como borradas en el catálogo internacional de UNECE, serán retenidas indefinidamente en las listas de códigos. En su caso, estas unidades podrán ser reinstalado a través del proceso de mantenimiento.', '13/08/2017', NULL, NULL),
(7, '32', 'Kilogramo por tonelada métrica seca del aire', NULL, 'Las unidades marcadas como borradas en el catálogo internacional de UNECE, serán retenidas indefinidamente en las listas de códigos. En su caso, estas unidades podrán ser reinstalado a través del proceso de mantenimiento.', '13/08/2017', NULL, NULL),
(8, '36', 'Pie cúbico por minuto por pie cuadrado', 'Se requiere factor de conversión', 'Las unidades marcadas como borradas en el catálogo internacional de UNECE, serán retenidas indefinidamente en las listas de códigos. En su caso, estas unidades podrán ser reinstalado a través del proceso de mantenimiento.', '13/08/2017', NULL, 'Ft³ / (min / ft²)'),
(9, '44', 'Bolsa a granel de quinientos kilos', NULL, 'Las unidades marcadas como borradas en el catálogo internacional de UNECE, serán retenidas indefinidamente en las listas de códigos. En su caso, estas unidades podrán ser reinstalado a través del proceso de mantenimiento.', '13/08/2017', NULL, NULL),
(10, '45', 'Bolsa a granel de trescientos kilos', NULL, 'Las unidades marcadas como borradas en el catálogo internacional de UNECE, serán retenidas indefinidamente en las listas de códigos. En su caso, estas unidades podrán ser reinstalado a través del proceso de mantenimiento.', '13/08/2017', NULL, NULL),
(11, '46', 'Bolsa a granel de cincuenta libras', NULL, 'Las unidades marcadas como borradas en el catálogo internacional de UNECE, serán retenidas indefinidamente en las listas de códigos. En su caso, estas unidades podrán ser reinstalado a través del proceso de mantenimiento.', '13/08/2017', NULL, NULL);HTML
<div class="form-group">
<span class="input-group-addon">Unidad De Medida SAT</span>
<select class="form-control input-lg nuevoUnidades select2 " id="nuevoUnidades" name="nuevoUnidades" required style="width: 100%;">
<option value="">Selecionar unidades</option>
</select>
</div>
<script src="vistas/js/productos.js"></script>JAVASCRIPT
// TRAE EL CODIGO DE LAS UNIDADES
$('.nuevoUnidades').select2({
ajax: {
url: 'ajax/autocompletarUnidades.php',
dataType: 'json'
// Additional AJAX parameters go here; see the end of this chapter for the full code of this example
}
});AJAX
<?php
require_once "../modelos/unidadMedidasSAT.modelo.php";
if(isset($_GET["term"])){
$buscar = "%".$_GET["term"]."%";
}else{
$buscar ="%%";
}
$datos = ModeloUnidadMedidasSAT::mdlMostrarAjax("unidadMedidasSAT", $buscar);
//echo json_encode($datos);
$jsonVariable =' { "results": [';
foreach ($datos as $key => $value) {
$jsonVariable .=' {
"id": '.$value["id"].',
"text": "'.$value["text"].'"
},';
}
$jsonVariable = substr($jsonVariable, 0, -1);
$jsonVariable .= ' ]
}';
echo $jsonVariable; Modelo
<?php
require_once "conexion.php";
Class ModeloUnidadMedidasSAT {
/* =============================================
MOSTRAR UNIDADMEDIDASSAT
============================================= */
Static Public Function mdlMostrarAjax($tabla, $buscar) {
If ($buscar != Null) {
$stmt = Conexion:: conectar() -> prepare( "Select id
,Nombre as text
From unidadMedidasSAT a WHERE Nombre like :buscar limit 10");
$stmt -> bindParam( ":buscar" , $buscar, PDO::PARAM_STR);
Try {
$stmt -> execute();
Return $stmt -> fetchAll();
} Catch (PDOException $e) {
$arr = $stmt -> errorInfo();
$arr[3] = " Error ";
If ($e -> getMessage() == 23000) {
$mensaje = " El registro esta duplicado, Favor de checar el numero de nomina ";
Return $mensaje;
} Else {
Return $arr[2];
}
}
} Else {
$stmt = Conexion:: conectar() -> prepare("Select id
,Nombre as text
From unidadMedidasSAT a limit 10 ");
$stmt -> execute();
Return $stmt -> fetchAll();
}
$stmt -> close();
$stmt = Null;
}
}Archivo Conexión
<?php
include_once "../configuracion.php";
include_once "../../../configuracion.php";
include_once "../../configuracion.php";
class Conexion{
static public function conectar(){
try {
$link = new PDO("mysql:host=".BD_HOST.";dbname=".BD_NOMBRE."",
BD_USUARIO,
BD_CONTRA);
}
catch (PDOException $e){
if($e->getCode()==2002){
echo '<!DOCTYPE html> <html lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="Esta Tienda está desarrollada con PrestaShop" />
<style> s ::-moz-selection {background: #b3d4fc; text-shadow: none;} ::selection {background: #b3d4fc; text-shadow: none;}
html {padding: 30px 10px; font-size: 16px; line-height: 1.4; color: #737373; background: #f0f0f0;
-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;} html,
input {font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;} body
{max-width:700px; _width: 700px; padding: 30px 20px 50px; border: 1px solid #b3b3b3;
border-radius: 4px;margin: 0 auto; box-shadow: 0 1px 10px #a7a7a7, inset 0 1px 0 #fff; background: #fcfcfc;}
h1 {margin: 0 10px; font-size: 50px; text-align: center;} h1 span {color: #bbb;}
h2 {color: #D35780;margin: 0 10px;font-size: 40px;text-align: center;} h2 span {color: #bbb;font-size: 80px;}
h3 {margin: 1.5em 0 0.5em;} p {margin: 1em 0;} ul {padding: 0 0 0 40px;margin: 1em 0;} .container
{max-width: 380px;_width: 480px;margin: 0 auto;} input::-moz-focus-inner {padding: 0;border: 0;} </style> </head>
<body> <div class="container"> <h2><span>500</span> Error interno del servidor</h2>
<p>¡Vaya! Algo salió mal.<br /><br />No se pudo conectar con la base de datos, revise los datos de conexion.</p>
</div>
</body>
</html>';
}
return "ERROR DE CONEXION";
}
$link->exec("set names utf8");
return $link;
}
}sudo apt install php8.0-mysql
sudo apt install php8.0-xdebugagregar al php.ini
xdebug.mode=debug
xdebug.start_with_request=yes
xdebug.client_port=9003
xdebug.client_host=localhost
xdebug.log=/var/log/xdebug.log
xdebug.idekey="netbeans-xdebug"sudo apt install software-properties-common
sudo add-apt-repository ppa:ondrej/php
sudo apt install php8.0 libapache2-mod-php8.0
sudo systemctl restart apache2
php -vCreado con WordPress & Tema de Anders Norén