I have a problem with my code, the problem is in the JavaScript but I do not know what it is, I also attach the html and css to make it look better. The idea is to make a file uploader with a progress bar to store files, I have it uploaded to this page in case you want to see it. The operation is this, the selected file is uploaded to a folder called "files", simply that.
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>PHP code:
<?php
$nombre_temporal = $_FILES['archivo']['tmp-name'];
$nombre = $_FILES['archivo']['name'];
move_uploaded_file($nombre_temporal, 'archivo/'.$nombre);
?>