La subida de imágenes múltiple es una característica que, casi todas las redes sociales tienen. En este tutorial os explicaré como implementar esto en vuestros proyectos sin refrescar la página para ello y utilizando Ajax mediante jQuery y PHP. Con esta acción seréis capaces de subir x imágenes a vuestro servidor sin que ello penalice la navegador del usuario, teniendo que recargar la página para ello. Sin más dilación, vamos a pasar a explicar paso por paso, cada una de las acciones a implementar para que este sistema funcione. Para ello utilizaremos el script jquery.wallform.js y jquery.forms.js de 9lessons.info ¿Estáis preparados? Pues vamos a ello.
Código Javascript
En la sentencia $("#photoimg").on('change',function(){}), photoimg hace referencia al ID del elemento input file. Y en la sentencia $('#imageform').ajaxForm(), imageform es el ID del propio formulario. Mediante este script podremos enviar la información del campo input file al formulario y tratarla sin tener que recargar la página utilizando el método ajaxForm(). Las imagenes subida se insertarán dentro de la etiqueta preview.
<script type="text/javascript" src="http://ajax.googleapis.com/
ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.wallform.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$('#photoimg').on('change', function()
{
var A=$("#imageloadstatus");
var B=$("#imageloadbutton");
$("#imageform").ajaxForm({target: '#preview',
beforeSubmit:function(){
A.show();
B.hide();
},
success:function(){
A.hide();
B.show();
},
error:function(){
A.hide();
B.show();
} }).submit();
});
});
</script>
Mediante este código mostramos y escondemos #imageloadstatus e #imageloadbutton basándonos en el estado de subida del formulario.
index.php
Contiene tanto código PHP como HTML. Forzamos el valor de sesión del usuario con la sentencia $session_id=1
<?php
include('db.php');
session_start();
$session_id='1'; // User login session value
?>
<div id='preview'>
</div>
<form id="imageform" method="post" enctype="multipart/form-data" action='ajaximage.php'>
Upload image:
<div id='imageloadstatus' style='display:none'><img src="loader.gif" alt="Uploading...."/></div>
<div id='imageloadbutton'>
<input type="file" name="photoimg" id="photoimg" />
</div>
</form>
Usuarios
Contendrá información del usuario como el nombre de usuario, la contraseña y el email.
CREATE TABLE `users` ( `uid` int(11) AUTO_INCREMENT PRIMARY KEY, `username` varchar(255) UNIQUE KEY, `password` varchar(100), `email` varchar(255) UNIQUE KEY )
Subidas de usuarios
Contendrá información relativa a lo que suben los usuarios como el id de la subida, el nombre de la imagen, la fk y la fecha de subida.
CREATE TABLE `user_uploads` ( `upload_id` int(11) AUTO_INCREMENT PRIMARY KEY, `image_name` text, `user_id_fk` int(11), `created` int(11) )
ajaximage.php
Este script te ayudará a subir las imágenes a sus respectivas carpetas. El nombre de los ficheros subidos se renombrará a este formato timestamp+session_id.extention.
<?php
include('db.php');
session_start();
$session_id='1'; // User session id
$path = "uploads/";
function getExtension($str)
{
$i = strrpos($str,".");
if (!$i)
{
return "";
}
$l = strlen($str) - $i;
$ext = substr($str,$i+1,$l);
return $ext;
}
$valid_formats = array("jpg", "png", "gif", "bmp","jpeg","PNG","JPG","JPEG","GIF","BMP");
if(isset($_POST) and $_SERVER['REQUEST_METHOD'] == "POST")
{
$name = $_FILES['photoimg']['name'];
$size = $_FILES['photoimg']['size'];
if(strlen($name))
{
$ext = getExtension($name);
if(in_array($ext,$valid_formats))
{
if($size<(1024*1024)) // Image size max 1 MB
{
$actual_image_name = time().$session_id.".".$ext;
$tmp = $_FILES['photoimg']['tmp_name'];
if(move_uploaded_file($tmp, $path.$actual_image_name))
{
//Insert upload image files names into user_uploads table
mysqli_query($db,"INSERT INTO user_uploads(image_name,user_id_fk,created) VALUES('$image_name','$session_id','$time')");
echo "<img src='uploads/".$actual_image_name."' class='preview'>";
}
else
echo "failed";
}
else
echo "Image file size max 1 MB";
}
else
echo "Invalid file format..";
}
else
echo "Please select image..!";
exit;
}
?>
db.php
Necesitamos un archivo de configuración para la conexión con la base de datos, y config.php será el encargado de ello. Mediante este archivo podrás modificar el nombre de usuario, la contraseña e incluso el nombre de la base de datos.
define('DB_SERVER', 'localhost');
define('DB_USERNAME', 'username');
define('DB_PASSWORD', 'password');
define('DB_DATABASE', 'database');
$db = mysqli_connect(DB_SERVER,DB_USERNAME,DB_PASSWORD,DB_DATABASE);
Fuente: 9lessons.info
