About Taringa!

Popular channels

Crea tu host de imagenes [PHP]

Hola a todos, hacía mucho que no creaba un post, así que en este tutorial les "enseñaré" a crear su propia web de Host de imágenes, desde cero, sera algo básica, lo único será en el index el formulario para subir la imagen y algunas imágenes que se han subido, así que sólo usaremos HTML, CSS y poco php, empecemos con el tutorial:

Lo primero que se tienen que hacer, es abrir su editor de texto para programar (yo uso sublime text2), ahí crean un nuevo archivo, en "formato" php y dentro de el pegan lo siguiente:

<!DOCTYPE html>
<html>
<head>
    <title>Host de imagenes</title>
    <meta charset="UTF-8" /><script type="text/javascript">window.NREUM||(NREUM={}),__nr_require=function(t,e,n){function r(n){if(!e[n]){var o=e[n]={exports:{}};t[n][0].call(o.exports,function(e){var o=t[n][1][e];return r(o||e)},o,o.exports)}return e[n].exports}if("function"==typeof __nr_require)return __nr_require;for(var o=0;o<n.length;o++)r(n[o]);return r}({1:[function(t,e,n){function r(){}function o(t,e,n){return function(){return i(t,[(new Date).getTime()].concat(u(arguments)),e?null:this,n),e?void 0:this}}var i=t("handle"),a=t(2),u=t(3),c=t("ee").get("tracer"),f=NREUM;"undefined"==typeof window.newrelic&&(newrelic=f);var s=["setPageViewName","setCustomAttribute","finished","addToTrace","inlineHit"],p="api-",l=p+"ixn-";a(s,function(t,e){f[e]=o(p+e,!0,"api")}),f.addPageAction=o(p+"addPageAction",!0),e.exports=newrelic,f.interaction=function(){return(new r).get()};var d=r.prototype={createTracer:function(t,e){var n={},r=this,o="function"==typeof e;return i(l+"tracer",[Date.now(),t,n],r),function(){if(c.emit((o?"":"no-")+"fn-start",[Date.now(),r,o],n),o)try{return e.apply(this,arguments)}finally{c.emit("fn-end",[Date.now()],n)}}}};a("setName,setAttribute,save,ignore,onEnd,getContext,end,get".split(","),function(t,e){d[e]=o(l+e)}),newrelic.noticeError=function(t){"string"==typeof t&&(t=new Error(t)),i("err",[t,(new Date).getTime()])}},{}],2:[function(t,e,n){function r(t,e){var n=[],r="",i=0;for(r in t)o.call(t,r)&&(n[i]=e(r,t[r]),i+=1);return n}var o=Object.prototype.hasOwnProperty;e.exports=r},{}],3:[function(t,e,n){function r(t,e,n){e||(e=0),"undefined"==typeof n&&(n=t?t.length:0);for(var r=-1,o=n-e||0,i=Array(o<0?0:o);++r<o;)i[r]=t[e+r];return i}e.exports=r},{}],ee:[function(t,e,n){function r(){}function o(t){function e(t){return t&&t instanceof r?t:t?u(t,a,i):i()}function n(n,r,o){t&&t(n,r,o);for(var i=e(o),a=l(n),u=a.length,c=0;c<u;c++)a[c].apply(i,r);var s=f[m[n]];return s&&s.push([w,n,r,i]),i}function p(t,e){g[t]=l(t).concat(e)}function l(t){return g[t]||[]}function d(t){return s[t]=s[t]||o(n)}function v(t,e){c(t,function(t,n){e=e||"feature",m[n]=e,e in f||(f[e]=[])})}var g={},m={},w={on:p,emit:n,get:d,listeners:l,context:e,buffer:v};return w}function i(){return new r}var a="[email protected]",u=t("gos"),c=t(2),f={},s={},p=e.exports=o();p.backlog=f},{}],gos:[function(t,e,n){function r(t,e,n){if(o.call(t,e))return t[e];var r=n();if(Object.defineProperty&&Object.keys)try{return Object.defineProperty(t,e,{value:r,writable:!0,enumerable:!1}),r}catch(i){}return t[e]=r,r}var o=Object.prototype.hasOwnProperty;e.exports=r},{}],handle:[function(t,e,n){function r(t,e,n,r){o.buffer([t],r),o.emit(t,e,n)}var o=t("ee").get("handle");e.exports=r,r.ee=o},{}],id:[function(t,e,n){function r(t){var e=typeof t;return!t||"object"!==e&&"function"!==e?-1:t===window?0:a(t,i,function(){return o++})}var o=1,i="[email protected]",a=t("gos");e.exports=r},{}],loader:[function(t,e,n){function r(){if(!h++){var t=y.info=NREUM.info,e=s.getElementsByTagName("script")[0];if(t&&t.licenseKey&&t.applicationID&&e){c(m,function(e,n){t[e]||(t[e]=n)});var n="https"===g.split(":")[0]||t.sslForHttp;y.proto=n?"https://":"http://",u("mark",["onload",a()],null,"api");var r=s.createElement("script");r.src=y.proto+t.agent,e.parentNode.insertBefore(r,e)}}}function o(){"complete"===s.readyState&&i()}function i(){u("mark",["domContent",a()],null,"api")}function a(){return(new Date).getTime()}var u=t("handle"),c=t(2),f=window,s=f.document,p="addEventListener",l="attachEvent",d=f.XMLHttpRequest,v=d&&d.prototype;NREUM.o={ST:setTimeout,CT:clearTimeout,XHR:d,REQ:f.Request,EV:f.Event,PR:f.Promise,MO:f.MutationObserver},t(1);var g=""+location,m={beacon:"bam.nr-data.net",errorBeacon:"bam.nr-data.net",agent:"js-agent.newrelic.com/nr-963.min.js"},w=d&&v&&v[p]&&!/CriOS/.test(navigator.userAgent),y=e.exports={offset:a(),origin:g,features:{},xhrWrappable:w};s[p]?(s[p]("DOMContentLoaded",i,!1),f[p]("load",r,!1)):(s[l]("onreadystatechange",o),f[l]("onload",r)),u("mark",["firstbyte",a()],null,"api");var h=0},{}]},{},["loader"]);</script>
    <link rel="stylesheet" type="text/css" href="estilos.css" />
</head>
<body>
    <div id="wrapper">
        <header><a href="index.php"><h2 class="title">Host de imagenes</h2></a><div class="clear"></div></header>
        <div id="contenido">
            <p>Para subir la imagen, lo único que tienes que hacer es seleccionar la imagen, en el formulario que encontrarás más abajo, cuando tengas seleccionada la imagen, sólo haces click en "<i>Subir imagen</i>", y luego te llevara a la pagina donde estará la imagen que seleccionaste, y los modos para insertarla en diferentes lugares.<br><br>
            Las "condiciones" para las imagenes son las siguientes:</p>
            <p class="condicion">La imagen debe tener un peso menor a 1.5 MB.</p>
            <p class="condicion">NO con contenido pornografico, gore, racismo etc.</p>
            <p class="condicion">La imagen de estár en formato png, jpg, gif, ico o bmp</p><br>
            <p style="margin-bottom:15px">Si estás seguro de que cumpliras con las condiciones anteriores, puedes continuar.</p>
            <div id="formulario">
                <form action="complete.php" method="post" enctype="multipart/form-data">           
                    <input type="file" name="imagen"  style="width:400px;"/>
                    <input type="submit" name="subir" value="Subir Imagen" />           
                </form>
            </div>
            <div id="ultimas">
            <h2 style="margin-bottom:15px">Algunas imagenes que se han subido</h2>
        <?php
        
function get_images(){
        
$arr_ext = array("bmp","BMP","gif","GIF","jpg","JPG","png","PNG","ico","ICO","jpeg","JPEG");
        
$mydir opendir('./upload/');
        while(
$file readdir($mydir)){
            
$ext substr($file, -3);
            if(
in_array($ext$arr_ext)){
                if(!empty(
$size)){
                    
$im_size substr($file, -62);
                    if (
$size == $im_size$images_list[] = substr($file0, -7);
                }else 
$images_list[] = $file;
            }
        }
        return 
$images_list;
}
$images_list get_images();
$i 1;
$limite 8;
foreach(
$images_list AS $img){
        if(
$i <= $limite) echo '<img id="img-home" src="upload/'.$img.'" alt="Imagen" />';
        
$i++;
}  
?>
</div>
<div id="publicidad"><?php include '728x90.php' ?>
</div>
        </div>
    </div>
    <footer>
        Copyright © <script>document.write(new Date().getFullYear());</script>
    </footer>
</body>
</html>


Si no entienden ese código, lo único que teneos es como ya dije, el formulario para enviar la imagen, y algunas imagenes que se han subido, que serán 8 las que se mostrarán, eso lo pueden poner a su gusto.
Ese archivo lo guardan en alguna carpeta, yo lo tengo en localhost/imagenes



Ahora creamos otro archivo, este sera donde aparecer la imagen que se ha cargado, en nuestri editor creamos un nuevo archivo, también en formato php, dentro de el pegan el siguiente código:

<?php
//CONFIGURACIONES PARA EL UPLOAD
$inicio 'http://localhost/imagenes/'//Página de inicio de la web, que termine en "/"
$nombreimagen $_FILES['imagen']['name']; //Nombre de la imagen
$tmpimagen $_FILES['imagen']['tmp_name']; //Directorio de la imagen
$extimagen pathinfo($nombreimagen); //Extension de la imagen
$ext = array("bmp","BMP","gif","GIF","jpg","JPG","png","PNG","ico","ICO","jpeg","JPEG"); //Formatos permitidos
$directorio 'upload/';//A donde se subira la imagen
$url $directorio.md5($nombreimagen).'.'.$extimagen['extension']; 
$tamaño getimagesize($_FILES['imagen']['tmp_name']); //Tamaño de la imagen
list($ancho$alto) = $tamaño;
?>
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="UTF-8" />
    <link rel="stylesheet" type="text/css" href="estilos.css" />
</head>
<body>
    <div id="wrapper">
        <header><a href="index.php"><h2 class="title">Host de imagenes</h2></a><div class="clear"></div></header>
        <div id="contenido">
<?php
if(isset($_POST['subir'])){
    if(
is_uploaded_file($tmpimagen)){
        if(
array_search($extimagen['extension'],$ext)){
            
copy($tmpimagen$url);
            echo 
'<h2 class="modo">Imagen seleccionada:</h2><div id="cont-imagen"><a href="'.$url.'" target="_blank"><img class="imagen" src="'.$url.'" /></a></div>';
            echo 
'<div id="publicidad">';include '728x90.php'; echo '</div>'//Incluimoas la publicidad
            
echo '<h2 class="modo">Enlace:</h2><pre id="cod">'.$inicio.$url.'</pre>';
            echo 
'<h2 class="modo">HTML</h2><pre id="cod"><img src="'.$inicio.$url.'" /></pre>';
            echo 
'<h2 class="modo">CSS y HTML (background)</h2><pre id="cod" style="text-align:left"><style type="text/css">
#img-background{
background: url('
.$inicio.$url.');
width: '
.$ancho.'px;
height: '
.$alto.'px;
}
</style>
<div id="img-background"></div></pre>'
;
            echo 
'<h2 class="modo">Foro/Comunidad</h2><pre id="cod">[IMG]'.$inicio.$url.'[/IMG]</pre>';
        }
        else {
            echo 
'Solo se permiten imágenes con formato bmp, jpg, gif o png<br>';
        }
    }
    else {
        echo 
'Selecciona una imagen.';
    }

?>
<h2 class="modo" style="margin-top:30px">Selecciona otra imagen</h2>
<div id="formulario">
<form action="complete.php" method="post" enctype="multipart/form-data">           
    <input type="file" name="imagen"  style="width:400px;"/>
    <input type="submit" name="subir" value="Subir Imagen" />           
</form>
</div>
</div>
</div>
<footer>
        Copyright © <script>document.write(new Date().getFullYear());</script>
    </footer>
</body>
</html>


Ese código tiene las funciones, que son al inicio obtener los datos de la imagen, como extensión, directorio de la imagen y dimensiones, aemas de que se definen unas configuraciones, que son a donde se subirá la imagen, o mejor dicho a que carpeta, en este caso yo seleccione upload, pero la pueden cambiar.
También usamos otro poco de php en el body, que lo único que hace es imprimir la imagen, y los metodos para insertarla, que yo seleccione, la imagen, el enlace directo, con la etiquet
0No comments yet