Resulta que estoy intentando crear una web donde se suba una imagen al servidor y esta devuelva un link con la imagen. De cierta forma lo logro, solo que cuando le doy clic al link la imagen no se me ve porque le falta el formato, lo que pasa es que quiero que la imagen salga en base64, para lo cual también tengo el código ya escrito, aquí os dejo todo:
Código: html5
Alguna idea?
<!DOCTYPE html>
<html lang="es" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="author" content="Diesan Romero">
<meta name="description" content="Sube tus imagenes de manera temporal">
<meta http-equiv="imagetoolbar" content="no">
<meta http-equiv="pragma" content="no-cache">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.5.0/css/mdb.min.css" rel="stylesheet">
<link rel="stylesheet" href="src/styles.css">
<title>Imágenes Momentaneas</title>
</head>
<body oncontextmenu="return false" ondragstart="return false" onselectstart="return false" onkeydown="return false">
<div class="container-fluid">
<div class="row justify-content-center mt-5">
<h1><span>Imágenes Momentáneas</span></h1>
</div>
<div class="row justify-content-center mt-4">
<form action="index.php" method="post" enctype="multipart/form-data">
<div class="form">
<h3 class="row justify-content-center mt-5">Seleccione el tiempo en minutos que estará su imagen en línea</h3>
<div class="row justify-content-center mt-1">
<div class="btn-group" role="group">
<button type="button" class="btn btn-warning">1</button>
<button type="button" class="btn btn-warning">5</button>
<button type="button" class="btn btn-warning">15</button>
<button type="button" class="btn btn-warning">30</button>
<button type="button" class="btn btn-warning">60</button>
</div>
</div>
<div class="row justify-content-center mt-5">
<input type="file" name="imagen" id="imagen" class="input-file">
<label for="imagen" class="btn btn-lg btn-outline-black js-labelFile">
<i class="icon fa fa-check"></i>
<span class="js-fileName">Elija la imagen a subir</span>
</label>
<input type="submit" class="btn btn-lg btn-red" value="Subir Imagen">
</div>
</div>
</form>
</div>
</div>
<?php
if (!isset($_FILES['imagen']['tmp_name']) || !file_exists($_FILES['imagen']['tmp_name']) || !is_uploaded_file($_FILES['imagen']['tmp_name'])){
}
else {
$nombre = $_FILES['imagen']['name'];
$tipo = $_FILES['imagen']['type'];
$tamano = $_FILES['imagen']['size'];
$tmpext=explode(".", $nombre);
$extension = end($tmpext);
$generado = md5($nombre.rand()).'.'.$extension;
$nombre = substr($generado, 0,7);
$carpetaImagenes = $_SERVER['DOCUMENT_ROOT'].DIRECTORY_SEPARATOR.'imagenes-momentaneas/imagenes';
if (!is_dir($carpetaImagenes)) {
mkdir($carpetaImagenes, 0775);
}
if (!is_writable($carpetaImagenes)) {
chmod($carpetaImagenes, 0775);
}
//Crea la carpeta Uploads
$carpetaUploads = $carpetaImagenes.DIRECTORY_SEPARATOR.'uploads';
if (!is_dir($carpetaUploads)) {
mkdir($carpetaUploads, 0775);
}
if (!is_writable($carpetaUploads)) {
chmod($carpetaUploads, 0775);
}
if ($_FILES['imagen']['size'] != 0 && $_FILES['imagen']['type'] === 'image/jpeg' || $_FILES['imagen']['type'] === 'image/jpg' || $_FILES['imagen']['type'] === 'image/png' || $_FILES['imagen']['type'] === 'image/gif')
{
// Envia la imagen del directorio temporar al servidor
move_uploaded_file($_FILES['imagen']['tmp_name'], $carpetaUploads.DIRECTORY_SEPARATOR.$nombre);
// Path de donde va a estar la imagen ya subida
$path = $carpetaUploads.DIRECTORY_SEPARATOR.$nombre;
$enlace = 'http://localhost/imagenes/uploads/'.$nombre.;
//echo "<img src='data:image/jpg;base64,".base64_encode(file_get_contents($path))."' />";
echo "<div class='row justify-content-center mt-2'><div class='col-4'><div class='alert alert-success visible' role='alert'>La imagen ha sido subida correctamente. Acá está el enlace directo: <a href='{$enlace}'>{$enlace}</a></div></div></div>";
}
}
?>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.13.0/umd/popper.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.5.0/js/mdb.min.js"></script>
<script type="text/javascript" src="src/main.js"></script>
</body>
</html>
Alguna idea?
