Add files via upload
This commit is contained in:
Fernando Méndez
GitHub
parent
0398094c5a
commit
94f76e7a82
|
|
@ -390,6 +390,31 @@
|
|||
height: 75%;
|
||||
}
|
||||
}
|
||||
|
||||
/* Promotions */
|
||||
.promotions {
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
}
|
||||
.promotions img {
|
||||
width: 100%;
|
||||
height: 150px;
|
||||
background-size: cover;
|
||||
}
|
||||
.promotions button {
|
||||
margin-top: 5%;
|
||||
}
|
||||
.controls {
|
||||
text-align: center;
|
||||
}
|
||||
/* Responsive layout */
|
||||
@media (max-width: 750px) {
|
||||
.promotions img {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Text Box */
|
||||
.textbox {
|
||||
|
|
|
|||
|
|
@ -426,6 +426,31 @@ main img {
|
|||
width: 100%;
|
||||
}
|
||||
|
||||
/* Promotions */
|
||||
.promotions {
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
}
|
||||
.promotions img {
|
||||
width: 100%;
|
||||
height: 150px;
|
||||
background-size: cover;
|
||||
}
|
||||
.promotions button {
|
||||
margin-top: 5%;
|
||||
}
|
||||
.controls {
|
||||
text-align: center;
|
||||
}
|
||||
/* Responsive layout */
|
||||
@media (max-width: 750px) {
|
||||
.promotions img {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Percentage bar */
|
||||
.bar {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,83 @@
|
|||
window.onload = function (promotions) {
|
||||
// Variables
|
||||
const IMAGENES = [
|
||||
'../img/promos/promo_vuelve.jpg',
|
||||
'../img/promos/promo_palomitas.jpg',
|
||||
'../img/promos/promo_miercoles.jpg'
|
||||
];
|
||||
const TIEMPO_INTERVALO_MILESIMAS_SEG = 3500;
|
||||
let posicionActual = 0;
|
||||
let $botonRetroceder = document.querySelector('#retroceder');
|
||||
let $botonAvanzar = document.querySelector('#avanzar');
|
||||
let $imagen = document.querySelector('.imagen');
|
||||
let $botonPlay = document.querySelector('#play');
|
||||
let $botonStop = document.querySelector('#stop');
|
||||
let intervalo;
|
||||
|
||||
// Funciones
|
||||
|
||||
/**
|
||||
* Funcion que cambia la foto en la siguiente posicion
|
||||
*/
|
||||
function pasarFoto() {
|
||||
if(posicionActual >= IMAGENES.length - 1) {
|
||||
posicionActual = 0;
|
||||
} else {
|
||||
posicionActual++;
|
||||
}
|
||||
renderizarImagen();
|
||||
}
|
||||
|
||||
/**
|
||||
* Funcion que cambia la foto en la anterior posicion
|
||||
*/
|
||||
function retrocederFoto() {
|
||||
if(posicionActual <= 0) {
|
||||
posicionActual = IMAGENES.length - 1;
|
||||
} else {
|
||||
posicionActual--;
|
||||
}
|
||||
renderizarImagen();
|
||||
}
|
||||
|
||||
/**
|
||||
* Funcion que actualiza la imagen de imagen dependiendo de posicionActual
|
||||
*/
|
||||
function renderizarImagen () {
|
||||
$imagen.style.backgroundImage = `url(${IMAGENES[posicionActual]})`;
|
||||
}
|
||||
|
||||
/**
|
||||
* Activa el autoplay de la imagen
|
||||
*/
|
||||
function playIntervalo() {
|
||||
intervalo = setInterval(pasarFoto, TIEMPO_INTERVALO_MILESIMAS_SEG);
|
||||
// Desactivamos los botones de control
|
||||
//$botonAvanzar.setAttribute('disabled', true);
|
||||
//$botonRetroceder.setAttribute('disabled', true);
|
||||
$botonPlay.setAttribute('disabled', true);
|
||||
$botonStop.removeAttribute('disabled');
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Para el autoplay de la imagen
|
||||
*/
|
||||
function stopIntervalo() {
|
||||
clearInterval(intervalo);
|
||||
// Activamos los botones de control
|
||||
$botonAvanzar.removeAttribute('disabled');
|
||||
$botonRetroceder.removeAttribute('disabled');
|
||||
$botonPlay.removeAttribute('disabled');
|
||||
$botonStop.setAttribute('disabled', true);
|
||||
}
|
||||
|
||||
// Eventos
|
||||
$botonAvanzar.addEventListener('click', pasarFoto);
|
||||
$botonRetroceder.addEventListener('click', retrocederFoto);
|
||||
$botonPlay.addEventListener('click', playIntervalo);
|
||||
$botonStop.addEventListener('click', stopIntervalo);
|
||||
// Iniciar
|
||||
renderizarImagen();
|
||||
playIntervalo();
|
||||
}
|
||||
|
|
@ -0,0 +1,125 @@
|
|||
<?php
|
||||
require_once('../assets/php/form.php');
|
||||
|
||||
class FormUploadFiles extends Form {
|
||||
//Constants:
|
||||
const HTML5_EMAIL_REGEXP = '^[a-zA-Z0-9.!#$%&\'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$';
|
||||
|
||||
public function __construct() {
|
||||
$options = array('enctype' => 'multipart/form-data');
|
||||
parent::__construct('formUploadFiles', $options);
|
||||
}
|
||||
|
||||
protected function generaCamposFormulario($datos, $errores = array()) {
|
||||
|
||||
// Se generan los mensajes de error si existen.
|
||||
$htmlErroresGlobales = self::generaListaErroresGlobales($errores);
|
||||
$errorFile = self::createMensajeError($errores, 'archivo', 'span', array('class' => 'error'));
|
||||
|
||||
foreach($datos as $key => $value){
|
||||
$dats = $key." ".$value." ";
|
||||
}
|
||||
|
||||
// Se genera el HTML asociado a los campos del formulario y los mensajes de error.
|
||||
$html = '
|
||||
<p><label for="archivo">Imagen:</label><input type="file" name="archivo" id="archivo" /></p><pre>'.$htmlErroresGlobales.'</pre>
|
||||
<p><input type="submit" id="submit" value="Subir" class="primary" /><pre>'.$errorFile.'</pre>
|
||||
'.$dats.'
|
||||
';
|
||||
|
||||
return $html;
|
||||
}
|
||||
|
||||
protected function procesaFormulario($datos) {
|
||||
// Solo se pueden definir arrays como constantes en PHP >= 5.6
|
||||
global $ALLOWED_EXTENSIONS;
|
||||
|
||||
$result = array();
|
||||
$ok = count($_FILES) == 1 && $_FILES['archivo']['error'] == UPLOAD_ERR_OK;
|
||||
|
||||
if ( $ok ) {
|
||||
$archivo = $_FILES['archivo'];
|
||||
$nombre = $_FILES['archivo']['name'];
|
||||
/* 1.a) Valida el nombre del archivo */
|
||||
$ok = check_file_uploaded_name($nombre) && check_file_uploaded_length($nombre) ;
|
||||
/* 1.b) Sanitiza el nombre del archivo
|
||||
$ok = sanitize_file_uploaded_name($nombre);
|
||||
*/
|
||||
/* 1.c) Utilizar un id de la base de datos como nombre de archivo */
|
||||
|
||||
/* 2. comprueba si la extensión está permitida*/
|
||||
$ok = $ok && in_array(pathinfo($nombre, PATHINFO_EXTENSION), $ALLOWED_EXTENSIONS);
|
||||
|
||||
/* 3. comprueba el tipo mime del archivo correspode a una imagen image/* */
|
||||
$finfo = finfo_open(FILEINFO_MIME_TYPE);
|
||||
$mimeType = finfo_file($finfo, $_FILES['archivo']['tmp_name']);
|
||||
$ok = preg_match('/image\/*./', $mimeType);
|
||||
finfo_close($finfo);
|
||||
|
||||
if ( $ok ) {
|
||||
$tmp_name = $_FILES['archivo']['tmp_name'];
|
||||
|
||||
if ( !move_uploaded_file($tmp_name, FILMS_DIR.$nombre) ) {
|
||||
$result[] = 'Error al mover el archivo';
|
||||
}
|
||||
|
||||
// 4. Si fuese necesario guardar en la base de datos la ruta relativa $nombre del archivo
|
||||
return "index.php#img=".urlencode('img/'.$nombre);
|
||||
} else {
|
||||
$result["errorFile"] = 'El archivo tiene un nombre o tipo no soportado';
|
||||
}
|
||||
} else {
|
||||
$result[] = 'Error al subir el archivo.';
|
||||
}
|
||||
return $result;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Check $_FILES[][name]
|
||||
*
|
||||
* @param (string) $filename - Uploaded file name.
|
||||
* @author Yousef Ismaeil Cliprz
|
||||
* @See http://php.net/manual/es/function.move-uploaded-file.php#111412
|
||||
*/
|
||||
function check_file_uploaded_name ($filename) {
|
||||
return (bool) ((mb_ereg_match('/^[0-9A-Z-_\.]+$/i',$filename) === 1) ? true : false );
|
||||
}
|
||||
|
||||
/**
|
||||
* Sanitize $_FILES[][name]. Remove anything which isn't a word, whitespace, number
|
||||
* or any of the following caracters -_~,;[]().
|
||||
*
|
||||
* If you don't need to handle multi-byte characters you can use preg_replace
|
||||
* rather than mb_ereg_replace.
|
||||
*
|
||||
* @param (string) $filename - Uploaded file name.
|
||||
* @author Sean Vieira
|
||||
* @see http://stackoverflow.com/a/2021729
|
||||
*/
|
||||
function sanitize_file_uploaded_name($filename) {
|
||||
/* Remove anything which isn't a word, whitespace, number
|
||||
* or any of the following caracters -_~,;[]().
|
||||
* If you don't need to handle multi-byte characters
|
||||
* you can use preg_replace rather than mb_ereg_replace
|
||||
* Thanks @Łukasz Rysiak!
|
||||
*/
|
||||
$newName = mb_ereg_replace("([^\w\s\d\-_~,;\[\]\(\).])", '', $filename);
|
||||
// Remove any runs of periods (thanks falstro!)
|
||||
$newName = mb_ereg_replace("([\.]{2,})", '', $newName);
|
||||
|
||||
return $newName;
|
||||
}
|
||||
|
||||
/**
|
||||
* Check $_FILES[][name] length.
|
||||
*
|
||||
* @param (string) $filename - Uploaded file name.
|
||||
* @author Yousef Ismaeil Cliprz.
|
||||
* @See http://php.net/manual/es/function.move-uploaded-file.php#111412
|
||||
*/
|
||||
function check_file_uploaded_length ($filename) {
|
||||
return (bool) ((mb_strlen($filename,'UTF-8') < 250) ? true : false);
|
||||
}
|
||||
}
|
||||
?>
|
||||
|
|
@ -19,6 +19,11 @@
|
|||
define('FILMS_DIR', dirname(RAIZ_APP).'img/films/tmp');
|
||||
define('FILMS_DIR_PROTECTED', RAIZ_APP.'img/films/tmp');
|
||||
|
||||
/**
|
||||
* Allowed extensions for image files.
|
||||
*/
|
||||
$ALLOWED_EXTENSIONS = array('gif','jpg','jpe','jpeg','png');
|
||||
|
||||
/**
|
||||
* Utf-8 support settings, location (language and country) and time zone.
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -95,7 +95,7 @@ abstract class Form {
|
|||
$opciones = array_merge($opcionesPorDefecto, $opciones);
|
||||
|
||||
$this->ajax = $opciones['ajax'];
|
||||
$this->action = $opciones['action'];
|
||||
$this->action = $opciones['action'];
|
||||
$this->classAtt = $opciones['class'];
|
||||
$this->enctype = $opciones['enctype'];
|
||||
|
||||
|
|
|
|||
|
|
@ -495,6 +495,7 @@
|
|||
//Print generic Footer:
|
||||
function print_footer(){
|
||||
$prefix = $this->prefix;
|
||||
$page = $this->page;
|
||||
|
||||
/* TODO */
|
||||
$css = "{$prefix}assets/css/highContrast.css";
|
||||
|
|
@ -516,7 +517,9 @@
|
|||
|
||||
echo"
|
||||
<!-- Scripts -->
|
||||
<script src='{$prefix}assets/js/cambiarCSS.js'></script>\n";
|
||||
<script src='{$prefix}assets/js/cambiarCSS.js'></script>
|
||||
";
|
||||
if($page === "FDI-Cines") echo"<script src='{$prefix}assets/js/promotions.js'></script>\n";
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -85,4 +85,5 @@ class FormContact extends Form {
|
|||
|
||||
return $result;
|
||||
}
|
||||
}
|
||||
}
|
||||
?>
|
||||
13
index.php
13
index.php
|
|
@ -11,6 +11,19 @@
|
|||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section id="promociones" class="row">
|
||||
<div class="code">
|
||||
<section class="promotions">
|
||||
<button id="retroceder">Anterior</button>
|
||||
<img class="imagen" />
|
||||
<button id="avanzar">Siguiente</button>
|
||||
</section>
|
||||
<section class="controls">
|
||||
<button id="play">Play</button>
|
||||
<button id="stop" disabled>Stop</button>
|
||||
</section>
|
||||
</div>
|
||||
</section>
|
||||
';
|
||||
|
||||
//General page content:
|
||||
|
|
|
|||
Loading…
Reference in New Issue