Seré breve, este código no es mio, me indicaron que lo utilizara para subir archivos al servidor, de entrada no tengo mucha experiencia en javascript estructurado de la manera que se ejemplifica. Tengo un formulario HTML:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title> Subir Archivos</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="principal">
<h1>Subir Archivos</h1>
<form action="" id="form_subir">
<div class="form-1-2">
<label for="">Archivo a Subir:</label>
<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="Enviar">
<input type="button" class="cancel" id="cancelar" value="Cancelar">
</div>
</form>
</div>
<script src="js/main.js"></script>
</body>
</html>
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');
//Petición
let peticion = new XMLHttpRequest();
//Progreso
peticion.upload.addEventListener("progress",(event) =>{
let porcentaje = Math.round((event.loaded / event.total) * 100);
console.log(porcentaje);
barra_estado.style.width = porcentaje+'%';
span.innerHTML = porcentaje+'%';
});
//Finalizado
peticion.addEventListener("load",() => {
barra_estado.classList.add('barra_verde');
span.innerHTML = "Proceso Completado";
});
//Enviar datos
peticion.open('post','subir.php');
peticion.send(new FormData(form));
//Cancelar
boton_cancelar.addEventListener("click", () => {
peticion.abort();
barra_estado.classList.remove('barra_verde');
barra_estado.classList.add('barra_roja');
span.innerHTML = "Proceso Cancelado";
});
}
<?php
$archivo_nombre = $_FILES['archivo']['name'];
$archivo_tamanio = $_FILES['archivo']['size'];
$archivo_tipo = $_FILES['archivo']['type'];
$archivo_nombre_temporal = $_FILES['archivo']['tmp_name'];
$array = explode(".", $archivo_nombre);
$archivo_extension = end($array);
$cambiar_nombre = null;
$cambiar_nombre = sha1("ArchivoNuevo" . rand(0, 10000000));
$archivo_nombre = $cambiar_nombre . "." . $archivo_extension;
$archivo_nombre = preg_replace('/ /', '_', $archivo_nombre);
$archivo_nombre = preg_replace('/%20/', '_', $archivo_nombre);
$archivo_nombre = preg_replace('/:/', '_', $archivo_nombre);
move_uploaded_file($archivo_nombre_temporal, 'archivos/tmp/' . $archivo_nombre);
?>
Si alguien pudiera explicarme un poco al respecto se agradece de antemano
$_FILES['archivo']
y esa validación debe hacerse del lado del servidor. Y, en este caso es independiente del JavaScript que usas. La validación será php consulta $_FILES