¡Advertencia!
Este tema no ha tenido respuestas en más de un mes. Recuerda que si deseas añadir una nueva debes cumplir con las normas de la web.

¿Alguien por aquí sabe JavaScript? Veréis, resulta que estoy teniendo un problema con un upload de imágenes que he estado intentando hacer. Para hacerlo, me he ayudado de páginas externas, pero claro, para adaptarlo a lo que yo quería hacer exactamente he tenido que modificar cosas y no sé si no va a causa de eso, o es cosa del servidor.

En mi mini-web (escrita casi toda en HTML), dentro de head, he puesto lo siguiente en CSS:

<style>
    .container {
        width: 500px;
        margin: 0 auto;
    }
    .progress_outer {
        border: 1px solid #000;
    }
    .progress {
        width: 20%;
        background: #DEDEDE;
        height: 20px;  
    }
    </style>

Luego, más abajo, he puesto lo que sería el upload:

<div class='container'>
        <p>
            Select File: <input type='file' id='_file'> <input type='button' id='_submit' value='Upload!'>
        </p>
        <div class='progress_outer'>
            <div id='_progress' class='progress'></div>
        </div>
    </div>
    <script src='upload.js'></script>


Claro está, hay un archivo PHP, que es el que he sabido más o menos manejar poniendo lo siguiente:

<?php

function outputJSON($msg, $status = 'error'){
    header('Content-Type: application/json');
    die(json_encode(array(
        'data' => $msg,
        'status' => $status
    )));
}

if($_FILES['SelectedFile']['error'] > 0){
    outputJSON('Ha ocurrido un error al subir la imagen.');
}

if(!getimagesize($_FILES['SelectedFile']['tmp_name'])){
    outputJSON('Por favor, asegúrate de que estás subiendo una imagen.');
}

if($_FILES['SelectedFile']['type'] != 'image/png' or $_FILES['SelectedFile']['type'] != 'image/jpg' or $_FILES['SelectedFile']['type'] != 'image/gif'){
    outputJSON('El servidor no soporta este tipo de imágenes, recuerda que únicamente puedes subir imágenes con formato PNG, JPG y GIF.');
}


if(file_exists('upload/' . $_FILES['SelectedFile']['name'])){
    outputJSON('El nombre del archivo que has intentado subir ya existe. Por favor, prueba con otro nombre.');
}


if(!move_uploaded_file($_FILES['SelectedFile']['tmp_name'], 'upload/' . $_FILES['SelectedFile']['name'])){
    outputJSON('Error al subir el archivo. Por favor, inténtalo más tarde.');
}

outputJSON('El archivo ha sido subido correctamente al servidor.' . 'upload/' . $_FILES['SelectedFile']['name'] . '".', 'success');

Creo que está bien, pero no voy a decir que lo está, porque no lo sé seguro. La duda que tengo es si el siguiente archivo programado en JavaScript está bien:

var _submit = document.getElementById('_submit'), 
_file = document.getElementById('_file'), 
_progress = document.getElementById('_progress');

var upload = function(){

    if(_file.files.length === 0){
        return;
    }

    var data = new FormData();
    data.append('SelectedFile', _file.files[0]);

    var request = new XMLHttpRequest();
    request.onreadystatechange = function(){
        if(request.readyState == 4){
            try {
                var resp = JSON.parse(request.response);
            } catch (e){
                var resp = {
                    status: 'error',
                    data: 'Unknown error occurred: [' + request.responseText + ']'
                };
            }
            console.log(resp.status + ': ' + resp.data);
        }
    };

    request.upload.addEventListener('progress', function(e){
        _progress.style.width = Math.ceil(e.loaded/e.total) * 100 + '%';
    }, false);

    request.open('POST', 'upload.php');
    request.send(data);
}

_submit.addEventListener('click', upload);

Si los tres están bien programados, entonces debe ser cosa del servidor. Pero no lo entiendo, porque he conseguido subir algunas imágenes correctamente, lo que pasa es que normalmente, suele quedarse la barra de progreso en el final y no sube nada.

¡Gracias de antemano por vuestra ayuda!

Creo que el problema lo tienes en el archivo PHP.

if($_FILES['SelectedFile']['type'] != 'image/png' AND $_FILES['SelectedFile']['type'] != 'image/jpg' AND $_FILES['SelectedFile']['type'] != 'image/gif'){
    outputJSON('El servidor no soporta este tipo de imágenes, recuerda que únicamente puedes subir imágenes con formato PNG, JPG y GIF.');
}
Nada, sigo sin poder...

He dejado la programación de la siguiente manera: dentro de head, he mantenido esto en CSS:

<style>
    .container {
        width: 500px;
        margin: 0 auto;
    }
    .progress_outer {
        border: 1px solid #000;
    }
    .progress {
        width: 20%;
        background: #DEDEDE;
        height: 20px;  
    }

    .upload{ 
        background:#e7e7e7; 
        box-shadow:0px 0px 10px black; 
        width:500px; 
        height:200px; 
        margin-right:auto; 
        margin-left:auto; 
        border-radius:20px; 
    } 
</style>

Luego dentro de body he dejado lo siguiente:

<div class='container'>
        <p>
            Select File: <input type='file' id='_file'> <input type='button' id='_submit' value='Upload!'>
        </p>
        <div class='progress_outer'>
            <div id='_progress' class='progress'></div>
        </div>
    </div>
    <script src='upload.js'></script>

El archivo PHP ha quedado así:

<?php
function outputJSON($msg, $status = 'error'){
    header('Content-Type: application/json');
    die(json_encode(array(
        'data' => $msg,
        'status' => $status
    )));
}

if($_FILES['SelectedFile']['error'] > 0){
    outputJSON('¿Seguro que has subido una imagen?');
}

if(!getimagesize($_FILES['SelectedFile']['tmp_name'])){
    outputJSON('Por favor, aségurate de que estás subiendo una imagen.');
}

if($_FILES['SelectedFile']['type'] != 'image/png' AND $_FILES['SelectedFile']['type'] != 'image/jpg' AND $_FILES['SelectedFile']['type'] != 'image/gif'){
    outputJSON('Tipo de archivo no permitido.');
}

if(file_exists('upload/' . $_FILES['SelectedFile']['name'])){
    outputJSON('El nombre del archivo ya existe. Por favor, ponle otro nombre a tu imagen.');
}

if(!move_uploaded_file($_FILES['SelectedFile']['tmp_name'], 'upload/' . $_FILES['SelectedFile']['name'])){
    outputJSON('Ha ocurrido un error al subir tu imagen al servidor. Por favor, prueba de nuevo.');
}

outputJSON('El archivo se ha subido correctamente a "' . 'upload/' . $_FILES['SelectedFile']['name'] . '".', 'success');

Y, finalmente, en el archivo JS no he modificado nada, por lo que ha quedado así:

var _submit = document.getElementById('_submit'), 
_file = document.getElementById('_file'), 
_progress = document.getElementById('_progress');

var upload = function(){

    if(_file.files.length === 0){
        return;
    }

    var data = new FormData();
    data.append('SelectedFile', _file.files[0]);

    var request = new XMLHttpRequest();
    request.onreadystatechange = function(){
        if(request.readyState == 4){
            try {
                var resp = JSON.parse(request.response);
            } catch (e){
                var resp = {
                    status: 'error',
                    data: 'Unknown error occurred: [' + request.responseText + ']'
                };
            }
            console.log(resp.status + ': ' + resp.data);
        }
    };

    request.upload.addEventListener('progress', function(e){
        _progress.style.width = Math.ceil(e.loaded/e.total) * 100 + '%';
    }, false);

    request.open('POST', 'upload.php');
    request.send(data);
}

_submit.addEventListener('click', upload);

¿Me he dejado algo sin modificar, sin añadir o sin eliminar? :S
Ya probé añadiendo ?> y ni mensaje de error al subir vídeo da xd está más deforme esto
pq no usas uno simple php?

Para seguirme solamente tienes que darle al corazón

Ya probé añadiendo ?> y ni mensaje de error al subir vídeo da xd está más deforme esto
pq no usas uno simple php?

Ya probé con el que me diste y creo que también tuve algún error al cambiar una cosa. xd

Luego voy a volver a probar de nuevo, a ver. De todas formas, a ver si consigo construir correctamente el que os dí y ya, si no se puede de ninguna manera, uso uno en PHP, porque yo no tengo ni idea de JS...
Esto tengo en index.php
y cambia MAGE por el nombre de la carpeta que vayas a usar

Para seguirme solamente tienes que darle al corazón

Esto tengo en index.php
y cambia MAGE por el nombre de la carpeta que vayas a usar

Ahora lo pruebo y te digo. ¡Gracias, Mao!


Ya probé añadiendo ?> y ni mensaje de error al subir vídeo da xd está más deforme esto
pq no usas uno simple php?

Ya probé con el que me diste y creo que también tuve algún error al cambiar una cosa. xd

Luego voy a volver a probar de nuevo, a ver. De todas formas, a ver si consigo construir correctamente el que os dí y ya, si no se puede de ninguna manera, uso uno en PHP, porque yo no tengo ni idea de JS...

En teoria el JS está bien.



Ya probé añadiendo ?> y ni mensaje de error al subir vídeo da xd está más deforme esto
pq no usas uno simple php?

Ya probé con el que me diste y creo que también tuve algún error al cambiar una cosa. xd

Luego voy a volver a probar de nuevo, a ver. De todas formas, a ver si consigo construir correctamente el que os dí y ya, si no se puede de ninguna manera, uso uno en PHP, porque yo no tengo ni idea de JS...

En teoria el JS está bien.

Entonces no sé cuál puede ser el problema... Ando probando ahora el que me acaba de dar Mao, a ver si consigo hacerle unas modificaciones y subirlo a mi servidor correctamente.
No sé si es que me bloqueé o qué, pero no consigo solucionar lo siguiente, ¿alguien sabe qué tengo que cambiar?



Este es el CSS que he puesto:

.tabs {
margin: 0 auto;
min-height: 1500px;
position: relative;
width: 800px;
}
.tab {
float: left;
}
.tab label {
background-color: white;
border-radius: 5px 5px 5 5;
box-shadow: -3px 3px 2px black inset;
color: black;
cursor: pointer;
left: 0;
margin-right: 10px;
padding: 10px 10px;
position: relative;
}

.tab [type=radio] { display: none; }

.content {
background-color: orange;
bottom: 0;
left: 0;
overflow: hidden;
padding: 10px;
position: absolute;
right: 0;
top: 23px;
}

.content > * {
opacity: 0;

-moz-transform: translateX(-100%);
-webkit-transform: translateX(-100%);
-o-transform: translateX(-100%);

-moz-transition: all 0.6s ease;
-webkit-transition: all 0.6s ease;
-o-transition: all 0.6s ease;
}

[type="radio"]:checked ~ label {
background-color: orange;
box-shadow: 0 3px 2px #black inset;
color: white;
z-index: 2;
}
[type=radio]:checked ~ label ~ .content { z-index: 1; }
[type=radio]:checked ~ label ~ .content > * {
opacity: 1;
-moz-transform: translateX(0);
-webkit-transform: translateX(0);
-o-transform: translateX(0);
-ms-transform: translateX(0);
}

Necesito que las pestañas no se corten de esta manera y que salgan bien. Gracias de antemano por vuestra ayuda.
Dale z-index: 3 a tabs, ok no déjáme probar xd

edit, méteselo a .tab label

Para seguirme solamente tienes que darle al corazón

Dale z-index: 3 a tabs, ok no déjáme probar xd

edit, méteselo a .tab label

Yap. ¡Muchas gracias, Mao!
Si siempre que reinicio la página, la pestaña activa es "inicio", ¿es posible hacer que al subir una imagen se muestre "subir imágenes" sólo en esa ocasión? :S

Luego aparte, me surgió una duda con el upload. ¿Es posible eliminar todo ese espacio que hay ahí? Es extraño porque, que yo vea, no he puesto ningún br ni nada por el estilo...

El código es el siguiente.

.upload{ /* CSS del UPLOAD */
background:#444444; 
box-shadow:0px 0px 10px black; 
width:985px; 
height:500px; 
margin-right:auto; 
margin-left:auto; 
border-radius:20px; 

} 
form{ 
        margin: 126px auto 0; 
        width: 225px; 
    } 
    label{ 
        display: block;
    } 
    input[type="file"]{ 
        display: block; 
        margin: 8px 0; 
    } 
    div.resultado{ 
        margin: 25px auto 0; 
        width: 225px; 
    } 
    div.resultado img{ 
        border: 2px solid #EEEEEE; 
        height: auto; 
        width: 225px; 
    }


<div class="upload"> <!-- UPLOAD -->
    <form action="" method="post" enctype="multipart/form-data"> 
    <br>Seleccionar un archivo
    <input type="file" name="archivo" id="archivo" /> <br> 
    <input type="submit" name="boton" value="Subir" /> 
    </form> 
    <div class="resultado"> 
<?php 
if(isset($_POST['boton'])){ 
    if ((($_FILES["archivo"]["type"] == "image/png") ||  
    ($_FILES["archivo"]["type"] == "image/jpg") ||  
    ($_FILES["archivo"]["type"] == "image/gif")) &&  
    ($_FILES["archivo"]["size"] < 999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999)) { 
     
      if ($_FILES["archivo"]["error"] > 0) { 
        echo $_FILES["archivo"]["error"] . "<br />"; 
      } else { 
          if (file_exists("upload/" . $_FILES["archivo"]["name"])) { 
            echo $_FILES["archivo"]["name"] . " ya existe. "; 
          } else { 
            move_uploaded_file($_FILES["archivo"]["tmp_name"], 
            "upload/" . $_FILES["archivo"]["name"]); 
            echo "El archivo se ha subido con &#233;xito al servidor. <br>"; 
            echo "<a href='upload/".$_FILES["archivo"]["name"]."' target='new'><img src='upload/".$_FILES["archivo"]["name"]."' /></a>"; 
          } 
      } 
    } else { 
        echo "Este tipo de archivos no est&#225;n permitidos."; 
    } 
} 

?>

</div>
</div>

¡Muchas gracias de antemano!
form{
margin: 26px auto 0;

Quítale el 1 :-) se pasó plagiándome toda la web jsjosjos

Para seguirme solamente tienes que darle al corazón

form{
margin: 26px auto 0;

Quítale el 1 :-) se pasó plagiándome toda la web jsjosjos

Gracias, Mao.

PD: No hay nada plagiado de tu web, lo único que aparece son algunos de los emoticonos y la aplicación de SoyJoaquin. (la cual está hecha para todo el mundo).
ah mejorado bastante tú mini web me gustan las transiciones .... la mía la he dejado .. me da pereza maquetar :c

ah mejorado bastante tú mini web me gustan las transiciones .... la mía la he dejado .. me da pereza maquetar :c

¡Gracias, Jorge!

Algunas cosas me han costado hacerlas bastante... y otras las he tenido que hacer con ayuda. Espero poder hacer pronto alguna cosilla más avanzada.


ah mejorado bastante tú mini web me gustan las transiciones .... la mía la he dejado .. me da pereza maquetar :c

¡Gracias, Jorge!

Algunas cosas me han costado hacerlas bastante... y otras las he tenido que hacer con ayuda. Espero poder hacer pronto alguna cosilla más avanzada.

Te dejo esta pagina .. es muy buena .. ay aprenderás mas cosas y html 5 y css3 etc Pagina
Copypaste no, pero inspirarte en más de un par de cosas es obvie sry


Te dejo esta pagina .. es muy buena .. ay aprenderás mas cosas y html 5 y css3 etc Pagina
Me encanta para testear códigos html, pero el otro día encontré uno mejor sin restrincciones xdd

Para seguirme solamente tienes que darle al corazón

Copypaste no, pero inspirarte en más de un par de cosas es obvie sry

Sí que me inspiré en un par de cosas, pero lo hice por mi cuenta y a mi manera. xddd


Te dejo esta pagina .. es muy buena .. ay aprenderás mas cosas y html 5 y css3 etc Pagina

¡Muchas gracias, Jorge! Voy a mirarla.
¿Es mejor hacer una consulta con MySQLi o PDO?

Usuario de confianza.