A continuación vamos crear una aplicación con mysql y php en la cual vamos a subir un producto mediante un formulario en cual de además de insertar sus características del producto vamos a poder subir una imagen del producto y posteriormente vamos poder visualizarla mediante una búsqueda y mostrarla en una paginador.

Comenzamos por crear nuestra base de datos con mysql escribimos el siguiente query:

CREATE DATABASE productdb CHARACTER SET utf8 COLLATE utf8_general_ci;
Luego creamos la tabla donde vamos a almacenar nuestro productos que registremos en el formulario
CREATE TABLE IF NOT EXISTS `producto` (
  `idproducto` INT NOT NULL AUTO_INCREMENT,
  `nombreProducto` VARCHAR(200) NOT NULL,
  `descripcion` VARCHAR(500) NOT NULL,
  `precio` FLOAT NOT NULL,
  `anchuraImagen` INT NOT NULL,
  `alturaImagen` INT NOT NULL,
  `tipoImagen` VARCHAR(15) NOT NULL,
  `imagen` LONGBLOB NOT NULL,
  PRIMARY KEY (`idproducto`, `nombreProducto`))
ENGINE = InnoDB
DEFAULT CHARACTER SET = utf8;

Una vez creada nuestra base de datos creamos una archivo config.php para poder conectranos a la base de datos y realizar todos querys necesarios para poder interactuar con la base de datos, escribimos el siguiente código:

<?php

$con = mysql_connect('localhost', 'root', 'lara') or die ('error: no se pudo conectar a mysql'); 
$database = 'productdb';

?>

Ahora realizamos nuestro formulario de captura y creamos el archivo index.php. Vamos a utilizar jquery validation para validar nuestro formulario.Al ultimo compartiremos el código funcional de este ejemplo.

 <!DOCTYPE html> 
<html>
<head>
<meta http-equiv='content-type' content='text/html; charset=UTF-8'/>
<title>product form</title>

<link rel="stylesheet" type="text/css" href="css/style.css" />


</head>

<body>
 <a href="producto.php">Buscar producto</a>
 <div class="contenido">
 
 
 <h1>Product Form</h1>
 
 
 <form id="form1" action="index.php" method="post" novalidate enctype="multipart/form-data">
 
 
 <fieldset>
 
 <legend>Introduce los datos  de tu producto en el siguiente formulario</legend>
 
 <label for="nombreProducto">Nombre del producto:</label>
 <input type="text" name="nombreProducto" id="nombreProducto"> 
 <div class="clear"> </div>
 <label for="descripcion">Descripción:</label>
  <textarea rows="10" cols="30" name="descripcion" id="descripcion"></textarea> 
 <div class="clear"> </div>
 <label for="precio">Precio:</label>
 <input type="text" name="precio" id="precio">
 <div class="clear"> </div>
 <label for="imagen">Subir imagen:</label>
 <input type="file" name="imagen" id="imagen" />
 <div class="clear"> </div>
 <input type="submit" class="enviar" name="enviar" id="enviar" value="subir producto" />
 
 </fieldset>
 
 </form>
 
  </div>

<script src="js/jquery.js"></script>
<script src="js/jquery.validate.js"></script>
<script src="js/additional-methods.js"></script>
<script src="js/messages_es.js"></script>
<script>

$("#form1").validate({
    rules: {
      nombreProducto: {
        required: true
      },
       descripcion: {
        required: true
       },
       precio: {
        required: true,
        number: true
       },
       imagen: {
    	 required: true,
    	 extension: "png|jpe?g|gif"
       },  
   },
    submitHandler: function(form) {
    	form.submit();

        //alert("producto enviado");
     }
  });




</script>


<?php 
if ( ! empty( $_POST ) ) {
	

	include("config.php");
	mysql_select_db("$database",$con);
	
	
	
	# Comprovamos que se haya subido un fichero
	if (is_uploaded_file($_FILES["imagen"]["tmp_name"]))
	
	{
	
		# Cogemos la anchura y altura de la imagen
	
		$info=getimagesize($_FILES["imagen"]["tmp_name"]);
	
		//echo "<BR>".$info[0]; //anchura
	
		//echo "<BR>".$info[1]; //altura
	
		$imagenBinaria = addslashes(file_get_contents($_FILES['imagen']['tmp_name']));
		
		
		
		
		mysql_query(" INSERT INTO producto VALUES(null,'".$_POST["nombreProducto"]."','".$_POST["descripcion"]."',".$_POST["precio"].",".$info[0].",".$info[1].",'".$_FILES["imagen"]["type"]."','".$imagenBinaria."') ",$con);
		
		
	
	}
	
	
	
	
}




	
	

?>
		








</body>








</html> 
    
 
Posteriormente creamos un archivo llamado producto.php donde vamos a realizar la búsqueda de nuestro producto ingresado en el formulario de captura y si hay demasiados productos con similares características se cargaran en un paginador realizado con jquery pagination
<!DOCTYPE html> 
<html>
<head>
<meta http-equiv='content-type' content='text/html; charset=UTF-8'/>
<title>product form</title>

<link rel="stylesheet" type="text/css" href="css/style.css" />


</head>

<body>
 <a href="index.php">Agregar Producto</a>
 <div class="contenido">
 
 
 <h1>Product Form</h1>
 
 
 <form id="form1" action="producto.php" method="post" novalidate enctype="multipart/form-data">
 
 
 <fieldset>
 
 <legend>Buscar producto</legend>
 
 <label for="nombreProducto">Buscar:</label>
 <input type="text" name="producto" id="producto" size="70"> 
 <input type="submit" class="buscar" name="buscar" id="buscar" value="buscar"/>
 
 </fieldset>
 
 </form>
 
  </div>


 <div class="paging"></div>


<?php 
if ( ! empty( $_POST ) ) {
	

	include("config.php");
	mysql_select_db("$database",$con);
	
	$results = mysql_query("SELECT * FROM producto WHERE nombreProducto LIKE '%".$_POST["producto"]."%'",$con);
	while($row = mysql_fetch_assoc($results)){
		?>
		
		<div class="element">
		 <hr>
		 <table>
		 <tr>
		 
		 <td>
		 <img src="data:<?php echo $row['tipoImagen']; ?>;base64,<?php echo base64_encode($row['imagen']); ?>" height="160" width="213" /><br>
		 
		 </td>
		 
		 <td>
		  ID Producto: <?php echo $row['idproducto']; ?><br>
		 Producto: <?php echo $row['nombreProducto']; ?><br>
		 Descripción: <?php echo $row['descripcion']; ?><br>
		 Precio: $<?php echo $row['precio']; ?><br>
		 </td>
		 
		 
		 </tr>
		 
		 
		 </table>
		 
		<hr>
		 
		
		</div>
			
	<?php	
	
	}
	
	
	
	
	
	
}
?>
 <div class="paging"></div>
		

       <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
        <script src="js/jquery.ba-hashchange.js"></script>
        <script src="js/jquery.paging.min.js"></script>
        <script>

            /*
             * Slicing the content with two pagers and using the URL Hash event
             */
            (function() {

                var prev = {
                    start: 0,
                    stop: 0
                };


                var content = $('.element');

                var Paging = $(".paging").paging(content.length, {
                    onSelect: function() {

                        var data = this.slice;

                        content.slice(prev[0], prev[1]).css('display', 'none');
                        content.slice(data[0], data[1]).fadeIn("slow");

                        prev = data;

                        return true; // locate!
                    },
                    onFormat: function(type) {

                        switch (type) {

                            case 'block':

                                if (!this.active)
                                    return '<span class="disabled">' + this.value + '</span>';
                                else if (this.value != this.page)
                                    return '<em><a href="#' + this.value + '">' + this.value + '</a></em>';
                                return '<span class="current">' + this.value + '</span>';

                            case 'right':
                            case 'left':

                                if (!this.active) {
                                    return '';
                                }
                                return '<a href="#' + this.value + '">' + this.value + '</a>';

                            case 'next':

                                if (this.active) {
                                    return '<a href="#' + this.value + '" class="next">Next »</a>';
                                }
                                return '<span class="disabled">Next »</span>';

                            case 'prev':

                                if (this.active) {
                                    return '<a href="#' + this.value + '" class="prev">« Previous</a>';
                                }
                                return '<span class="disabled">« Previous</span>';

                            case 'first':

                                if (this.active) {
                                    return '<a href="#' + this.value + '" class="first">|<</a>';
                                }
                                return '<span class="disabled">|<</span>';

                            case 'last':

                                if (this.active) {
                                    return '<a href="#' + this.value + '" class="prev">>|</a>';
                                }
                                return '<span class="disabled">>|</span>';

                            case 'fill':
                                if (this.active) {
                                    return "...";
                                }
                        }
                        return ""; // return nothing for missing branches
                    },
                    format: '[< ncnnn! >]',
                    perpage: 3,
                    lapping: 0,
                    page: null // we await hashchange() event
                });


                $(window).hashchange(function() {

                    if (window.location.hash)
                        Paging.setPage(window.location.hash.substr(1));
                    else
                        Paging.setPage(1); // we dropped "page" support and need to run it by hand
                });

                $(window).hashchange();
            })();
        </script>




</body>



</html>
 

PHP 7.0

Ahora te ponemos la versión actualizada para que trabaje en php 7.0. El archivo para llamar conexion a mysql lo vamos a nombrar config.php

<?php

$cons_usuario="root";
$cons_contra="lara";
$cons_base_datos="productdb";
$cons_equipo="localhost";

$obj_conexion = mysqli_connect($cons_equipo,$cons_usuario,$cons_contra,$cons_base_datos);
if(!$obj_conexion)
{
	echo "<h3>No se ha podido conectar PHP - MySQL, verifique sus datos.</h3><hr><br>";
}




?>



 

index.php formulario para cargar el producto y su imagen
<!DOCTYPE html> 
<html>
<head>
<meta http-equiv='content-type' content='text/html; charset=UTF-8'/>
<title>product form</title>

<link rel="stylesheet" type="text/css" href="../css/style.css" />


</head>

<body>
 <a href="producto.php">Buscar producto</a>
 <div class="contenido">
 
 
 <h1>Product Form</h1>
 
 
 <form id="form1" action="index.php" method="post" novalidate enctype="multipart/form-data">
 
 
 <fieldset>
 
 <legend>Introduce los datos  de tu producto en el siguiente formulario</legend>
 
 <label for="nombreProducto">Nombre del producto:</label>
 <input type="text" name="nombreProducto" id="nombreProducto"> 
 <div class="clear"> </div>
 <label for="descripcion">Descripción:</label>
  <textarea rows="10" cols="30" name="descripcion" id="descripcion"></textarea> 
 <div class="clear"> </div>
 <label for="precio">Precio:</label>
 <input type="text" name="precio" id="precio">
 <div class="clear"> </div>
 <label for="imagen">Subir imagen:</label>
 <input type="file" name="imagen" id="imagen" />
 <div class="clear"> </div>
  <input type="submit" class="enviar" name="enviar" id="enviar" value="subir producto" />
 
 </fieldset>

 </form>
 
  </div>

<script src="../js/jquery.js"></script>
<script src="../js/jquery.validate.js"></script>
<script src="../js/additional-methods.js"></script>
<script src="../js/messages_es.js"></script>
<script>

$("#form1").validate({
    rules: {
      nombreProducto: {
        required: true
      },
       descripcion: {
        required: true
       },
       precio: {
        required: true,
        number: true
       },
       imagen: {
    	 required: true,
    	 extension: "png|jpe?g|gif"
       },  
   },
    submitHandler: function(form) {
    	form.submit();

        //alert("producto enviado");
     }
  });




</script>


<?php 
if ( ! empty( $_POST ) ) {
	

	include("config.php");
	
	
	
	
	# Comprovamos que se haya subido un fichero
	if (is_uploaded_file($_FILES["imagen"]["tmp_name"]))
	
	{
	
		# Cogemos la anchura y altura de la imagen
	
		$info=getimagesize($_FILES["imagen"]["tmp_name"]);
	
		//echo "<BR>".$info[0]; //anchura
	
		//echo "<BR>".$info[1]; //altura
	
		$imagenBinaria = addslashes(file_get_contents($_FILES['imagen']['tmp_name']));
		
		
		
		
		mysqli_query($obj_conexion," INSERT INTO producto VALUES(null,'".$_POST["nombreProducto"]."','".$_POST["descripcion"]."',".$_POST["precio"].",".$info[0].",".$info[1].",'".$_FILES["imagen"]["type"]."','".$imagenBinaria."') ");
		
		mysqli_close($obj_conexion);
	
	}
	
	
	
	
}




	
	

?>
		








</body>








</html>


producto.php Este archivo nos muestra la búsqueda de nuestro producto cargado

<!DOCTYPE html> 
<html>
<head>
<meta http-equiv='content-type' content='text/html; charset=UTF-8'/>
<title>product form</title>

<link rel="stylesheet" type="text/css" href="../css/style.css" />


</head>

<body>
 <a href="index.php">Agregar Producto</a>
 <div class="contenido">
 
 
 <h1>Product Form</h1>
 
 
 <form id="form1" action="producto.php" method="post" novalidate enctype="multipart/form-data">
 
 
 <fieldset>
 
 <legend>Buscar producto</legend>
 
 <label for="nombreProducto">Buscar:</label>
 <input type="text" name="producto" id="producto" size="70"> 
 <input type="submit" class="buscar" name="buscar" id="buscar" value="buscar"/>
 
 </fieldset>
 
 </form>
 
  </div>


 <div class="paging"></div>


<?php 
if ( ! empty( $_POST ) ) {
	

	include("config.php");
	
	
	$results = $obj_conexion->query("SELECT * FROM producto WHERE nombreProducto LIKE '%".$_POST["producto"]."%'");
	while($row = $results->fetch_array()){
		?>
		
		<div class="element">
		 <hr>
		 <table>
		 <tr>
		 
		 <td>
		 <img src="data:<?php echo $row['tipoImagen']; ?>;base64,<?php echo base64_encode($row['imagen']); ?>" height="160" width="213" /><br>
		 
		 </td>
		 
		 <td>
		  ID Producto: <?php echo $row['idproducto']; ?><br>
		 Producto: <?php echo $row['nombreProducto']; ?><br>
		 Descripción: <?php echo $row['descripcion']; ?><br>
		 Precio: $<?php echo $row['precio']; ?><br>
		 </td>
		 
		 
		 </tr>
		 
		 
		 </table>
		 
		<hr>
		 
		
		</div>
			
	<?php	
	
	}
	
	
	
	
	
	
}
?>
 <div class="paging"></div>
		

       <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
        <script src="../js/jquery.ba-hashchange.js"></script>
        <script src="../js/jquery.paging.min.js"></script>
        <script>

            /*
             * Slicing the content with two pagers and using the URL Hash event
             */
            (function() {

                var prev = {
                    start: 0,
                    stop: 0
                };


                var content = $('.element');

                var Paging = $(".paging").paging(content.length, {
                    onSelect: function() {

                        var data = this.slice;

                        content.slice(prev[0], prev[1]).css('display', 'none');
                        content.slice(data[0], data[1]).fadeIn("slow");

                        prev = data;

                        return true; // locate!
                    },
                    onFormat: function(type) {

                        switch (type) {

                            case 'block':

                                if (!this.active)
                                    return '<span class="disabled">' + this.value + '</span>';
                                else if (this.value != this.page)
                                    return '<em><a href="#' + this.value + '">' + this.value + '</a></em>';
                                return '<span class="current">' + this.value + '</span>';

                            case 'right':
                            case 'left':

                                if (!this.active) {
                                    return '';
                                }
                                return '<a href="#' + this.value + '">' + this.value + '</a>';

                            case 'next':

                                if (this.active) {
                                    return '<a href="#' + this.value + '" class="next">Next »</a>';
                                }
                                return '<span class="disabled">Next »</span>';

                            case 'prev':

                                if (this.active) {
                                    return '<a href="#' + this.value + '" class="prev">« Previous</a>';
                                }
                                return '<span class="disabled">« Previous</span>';

                            case 'first':

                                if (this.active) {
                                    return '<a href="#' + this.value + '" class="first">|<</a>';
                                }
                                return '<span class="disabled">|<</span>';

                            case 'last':

                                if (this.active) {
                                    return '<a href="#' + this.value + '" class="prev">>|</a>';
                                }
                                return '<span class="disabled">>|</span>';

                            case 'fill':
                                if (this.active) {
                                    return "...";
                                }
                        }
                        return ""; // return nothing for missing branches
                    },
                    format: '[< ncnnn! >]',
                    perpage: 3,
                    lapping: 0,
                    page: null // we await hashchange() event
                });


                $(window).hashchange(function() {

                    if (window.location.hash)
                        Paging.setPage(window.location.hash.substr(1));
                    else
                        Paging.setPage(1); // we dropped "page" support and need to run it by hand
                });

                $(window).hashchange();
            })();
        </script>




</body>



</html>



A continuación subimos un producto y presionamos subir producto
prodcutform project
Selecionamos buscar producto y en el formulario buscamos como domino
prodcutform project

prodcutform project
Ver ejemplo

Descargar versión php 5

Descargar versión php 7 github