2

tengo una un problema con mi codigo, el problema esta en el JavaScript pero no se que es, igualmente adjunto el html y css para que se vea mejor. La idea es hacer un file uploader con una barra de progreso para almacenar archivos, lo tengo subido a esta pagina por si lo quieren ver. El funcionamiento es este, se sube el archivo seleccionado a una carpeta llamada "archivos", simplemente eso.

document.addEventListener("DOMContentLoaded", () => {
	let form = document.getElementById('form_subir');
	form.addEventListener("submit" , function(event) {
		event.preventDefault();
		subir_archivos(this);
	});
});

		
function subir_archivos(form){
    let barra_estado = form.children[1].children[0],
       span = barra_estado.children[0],
	   boton_cancelar = form.children[2].children[1];
	barra_estado.classList.remove('barra_verde', 'barra_roja');
	
	
	let peticion = new XMLHttpRequest();
	
	peticion.addEventListener("progress", (event) => {
		let porcentaje = Math.round((event.loaded / event.total) * 100);
		
		console.log(porcentaje);
		
		barra_estado.style.width = porcentaje+'%';
		span.innerHTML = porcentaje+'%';
		
    });
	
	peticion.addEventListener("load", () => {
		barra_estado.classList.add('barra_verde');
		
		span.innerHTML = "Subida completada";
		
	});
	
	
	peticion.open('post' , 'subir.php');
	peticion.send(new FormData(form));
	
	
	boton_cancelar.addEventListener("click", () => {
		peticion.abort();
		barra_estado.classList.remove('barra_verde');
		barra_estado.classList.add('barra_roja');
		span.innerHTML = "Proceso cancelado";
	});
	
}
input[type="file"]{
margin: 0 0 15px;
padding: 10px 1%;
-webkit-border-radius: 3px;	
-moz-border-radius: 3px;
border-radius: 3px;			
width: 400px;
position: relative;
left: 420px;
top: 140px;
text-align: center;
}
#principal {
background-color: #EEEDED;	
width: 1349px;
height: 662px;
}
.barra {
	background-color: #f3f3f3;
	border-radius: 5px;
	box-shadow: inset 0px 0px 5px rgba(0,0,0,2);
	height: 25px;
	position: relative;
	top: 150px;
	
}
.cancel {
background: #484747 !important;	
border-radius: 8px 8px 8px 8px;
-moz-border-radius: 8px 8px 8px 8px;
-webkit-border-radius: 8px 8px 8px 8px;
border: 0px solid #000000;
width:100px;
height: 40px;
color: #fff;
font-size: 16px;
position: relative;
left: 520px;
top: 200px;
}
.btn {
background: #ed1f3c !important;	
border-radius: 8px 8px 8px 8px;
-moz-border-radius: 8px 8px 8px 8px;
-webkit-border-radius: 8px 8px 8px 8px;
border: 0px solid #000000;
width:100px;
height: 40px;
color: #fff;
font-size: 16px;
position: relative;
left: 450px;
top: 200px;
}

.barra_azul {
background-color: #247cc0;	
border-radius: 10px;
display: block;
height: 25px;
line-height: 25px;
text-align: center;
width: 0%;
	
}
.barra_verde {
background-color: #2ea265 !important;	
}
.barra_roja {
background-color: #de3152 !important;		
}
#form_subir {
margin: 1.5% 0;
padding: 2%;		
}
#barra_estado span {
color: #fff;
font-weight: bold;
line-height: 25px;	
	
}
<!DOCTYPE html>
<html>
    <head>
	     <!----Espacio para CSS---->
        <link href="CSS/EspaciosDownloader.css" rel="stylesheet" type="text/css">
		<link href="CSS/EspaciosUploader.css" rel="stylesheet" type="text/css">
		<!--Fuentes bases -->
		<link href="CSS/BaseFont.css" rel="stylesheet" type="text/css">
		<link href="https://fonts.googleapis.com/css?family=Archivo+Black|Concert+One|Contrail+One|Days+One|Fredoka+One|Hammersmith+One|Krona+One|Prosto+One|Righteous|Roboto|Roboto+Condensed|Source+Sans+Pro|Spectral+SC|Ubuntu|Volkhov|Work+Sans" rel="stylesheet">
        <title>Cqmadrejo Uploader</title>
		<!--JavaScript-->
		 <script type="text/javascript" src="JS/File.js"></script>
        <!--Compatibilidad--->
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        
        
    </head>
    <body>
	    <header>
		    <div id="header">
		    </div>
		</header>
	    <div id="principal">
		<form action="" id="form_subir">
		    <div class="form-1-2">
			    <input type="file" name="archivo" required>
			</div>
			<div class="barra">
			    <div class="barra_azul" id="barra_estado">
				<span></span>
				</div>
		    </div>
			<div class="acciones">
			    <input type="submit" class="btn" value="Subir">
			    <input type="button" class="cancel" id="cancelar" value="Cancelar"
			</div>
		</form>			
	    </div>
		<script src="JS/File.js"</script>
    </body>
</html>

Codigo PHP:

<?php
$nombre_temporal = $_FILES['archivo']['tmp-name'];
$nombre = $_FILES['archivo']['name'];
move_uploaded_file($nombre_temporal, 'archivo/'.$nombre);
?>

1 respuesta 1

0

Respuesta corta

No sé acerca del código PHP pero del lado del HTML a uno de tus inputs le falta un '>'.

Respuesta extendida

Al ejecutar el código en la pregunta arroja los siguientes errores en la consola del navegador

js:95 GET https://stacksnippets.net/CSS/EspaciosDownloader.css 
net::ERR_ABORTED js:96 GET https://stacksnippets.net/CSS/EspaciosUploader.css 
net::ERR_ABORTED js:98 GET https://stacksnippets.net/CSS/BaseFont.css 
net::ERR_ABORTED js:102 GET https://stacksnippets.net/JS/File.js 
net::ERR_ABORTED js:182 GET https://stacksnippets.net/JS/File.js net::ERR_ABORTED

Estos se deben a que se hace referencia a archivos que no están disponibles. En Stack Snippet si se va a hacer referencia a archivos debe incluirse la ruta completa o bien especificar la ruta base para las URL relativas mediante la <base href="poner aquí la URL base">.

Asumiendo que el código en los archivos referidos se ha subido al panel correspondiente de stack snippet y eliminando las etiquetas que no deberían usarse encontré que falta un > para cerrar una etiqueta input. A continuación el código corregido

document.addEventListener("DOMContentLoaded", () => {
  let form = document.getElementById('form_subir');
  form.addEventListener("submit", function(event) {
    event.preventDefault();
    subir_archivos(this);
  });
});


function subir_archivos(form) {
  let barra_estado = form.children[1].children[0],
    span = barra_estado.children[0],
    boton_cancelar = form.children[2].children[1];
  barra_estado.classList.remove('barra_verde', 'barra_roja');


  let peticion = new XMLHttpRequest();

  peticion.addEventListener("progress", (event) => {
    let porcentaje = Math.round((event.loaded / event.total) * 100);

    console.log(porcentaje);

    barra_estado.style.width = porcentaje + '%';
    span.innerHTML = porcentaje + '%';

  });

  peticion.addEventListener("load", () => {
    barra_estado.classList.add('barra_verde');

    span.innerHTML = "Subida completada";

  });


  peticion.open('post', 'subir.php');
  peticion.send(new FormData(form));


  boton_cancelar.addEventListener("click", () => {
    peticion.abort();
    barra_estado.classList.remove('barra_verde');
    barra_estado.classList.add('barra_roja');
    span.innerHTML = "Proceso cancelado";
  });

}
input[type="file"] {
  margin: 0 0 15px;
  padding: 10px 1%;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  width: 400px;
  position: relative;
  left: 420px;
  top: 140px;
  text-align: center;
}

#principal {
  background-color: #EEEDED;
  width: 1349px;
  height: 662px;
}

.barra {
  background-color: #f3f3f3;
  border-radius: 5px;
  box-shadow: inset 0px 0px 5px rgba(0, 0, 0, 2);
  height: 25px;
  position: relative;
  top: 150px;
}

.cancel {
  background: #484747 !important;
  border-radius: 8px 8px 8px 8px;
  -moz-border-radius: 8px 8px 8px 8px;
  -webkit-border-radius: 8px 8px 8px 8px;
  border: 0px solid #000000;
  width: 100px;
  height: 40px;
  color: #fff;
  font-size: 16px;
  position: relative;
  left: 520px;
  top: 200px;
}

.btn {
  background: #ed1f3c !important;
  border-radius: 8px 8px 8px 8px;
  -moz-border-radius: 8px 8px 8px 8px;
  -webkit-border-radius: 8px 8px 8px 8px;
  border: 0px solid #000000;
  width: 100px;
  height: 40px;
  color: #fff;
  font-size: 16px;
  position: relative;
  left: 450px;
  top: 200px;
}

.barra_azul {
  background-color: #247cc0;
  border-radius: 10px;
  display: block;
  height: 25px;
  line-height: 25px;
  text-align: center;
  width: 0%;
}

.barra_verde {
  background-color: #2ea265 !important;
}

.barra_roja {
  background-color: #de3152 !important;
}

#form_subir {
  margin: 1.5% 0;
  padding: 2%;
}

#barra_estado span {
  color: #fff;
  font-weight: bold;
  line-height: 25px;
}
<link href="https://fonts.googleapis.com/css?family=Archivo+Black|Concert+One|Contrail+One|Days+One|Fredoka+One|Hammersmith+One|Krona+One|Prosto+One|Righteous|Roboto|Roboto+Condensed|Source+Sans+Pro|Spectral+SC|Ubuntu|Volkhov|Work+Sans" rel="stylesheet">
<header>
  <div id="header">
  </div>
</header>
<div id="principal">
  <form action="" id="form_subir">
    <div class="form-1-2">
      <input type="file" name="archivo" required>
    </div>
    <div class="barra">
      <div class="barra_azul" id="barra_estado">
        <span></span>
      </div>
    </div>
    <div class="acciones">
      <input type="submit" class="btn" value="Subir">
      <input type="button" class="cancel" id="cancelar" value="Cancelar">
    </div>
  </form>
</div>

Ahora al intentar subir un archivo en la consola de Stack Snippet se ve registra lo siguiente

POST https://stacksnippets.net/subir.php 404 (Not Found)    
  (anonymous) @ VM783:1
  subir_archivos @ js:155
  (anonymous) @ js:122
NaN                                                snippet-javascript-console.min.js?v=1:1 

Faltaría ver si luego de haber corregido el '>' en tu ambiente de desarrollo ya funciona correctamente.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.