La razón por la que se muestra la barra del formulario "viejo" es probable porque estás utilizando
document.getElementsByClassName("barra")[0] para seleccionar la barra de progreso. Esto selecciona el primer elemento con la clase "barra" en el DOM, sin ningún contexto específico del formulario que estás trabajando. Si hay múltiples formularios en la página, esto puede referirse a la barra de un formulario diferente.
Para solucionar esto, debes asegurarte de que seleccionas la barra de progreso dentro del contexto del formulario específico que estás utilizando. Aquí tienes un ejemplo de cómo ajustar tu código:
### Código Modificado
JavaScript:
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 + "%";
// Suponiendo que ya tienes el formulario referenciado
let form = document.getElementById("form_subir"); // o el método que estés utilizando para obtener el formulario
form.querySelector(".barra").style.display = "block"; // Selecciona la barra dentro del formulario
form.style.pointerEvents = "none"; // Desactiva el formulario
});
### Cambios Realizados:
1.
Uso de querySelector con Contexto del Formulario: Utilicé
form.querySelector(".barra") para asegurarte de que seleccionas la barra de progreso correspondiente al formulario específico, evitando así cualquier conflicto con otras barras en el DOM.
2.
Referencia al Formulario: Asegúrate de que la variable
form esté correctamente referenciada antes de este código, utilizando el método que consideres más adecuado para obtener el formulario relevante.
Con esta modificación, la barra de progreso que se mostrará será siempre la del formulario correcto, evitando que se muestre la barra de otros formularios en el DOM.
document.addEventListener("DOMContentLoaded", () => {
// Delegación de eventos para los cambios en los archivos
document.addEventListener("change", function(event) {
if (event.target.matches("#fileclip")) {
handleFileChange(event.target);
}
});
// Delegación de eventos para el submit del formulario
document.addEventListener("submit", function(event) {
if (event.target.matches("#form_subir")) {
event.preventDefault();
subir_archivos(event.target);
}
});
});
function handleFileChange(uploadField) {
let form = uploadField.closest('form'); // Obtener el formulario específico
let libret = form.querySelector(".libret");
let samts = form.querySelector(".samts");
let flecha = form.querySelector(".flecha");
let requid = form.querySelector("#requid");
let pos1 = form.querySelector(".pos1");
let lt1 = form.querySelector(".lt1");
let lt2 = form.querySelector(".lt2");
if (uploadField.files[0].size > 11000000) {
libret.style.display = "none";
$(".wunner").css({"position": "absolute", "height": "100%", "width": "100%"});
pos1.checked = true;
lt1.style.display = "block";
lt2.style.display = "none";
samts.style.display = "block";
flecha.innerHTML = "Publicando post";
flecha.style.display = "block";
flecha.style.color = "#000";
requid.required = true;
uploadField.value = "";
} else {
libret.style.display = "block";
$(".wunner").css({"position": "absolute", "height": "100%", "width": "100%"});
pos1.checked = true;
lt1.style.display = "block";
lt2.style.display = "none";
samts.style.display = "none";
flecha.innerHTML = "Publicando post";
flecha.style.display = "block";
flecha.style.color = "#000";
requid.required = false;
pimor();
}
}
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 + "%";
document.getElementsByClassName("barra")[0].style.display = "block";
form.style.pointerEvents = "none"; // Desactiva el formulario
});
// Finalizado
peticion.addEventListener("load", () => {
barra_estado.classList.add("barra_verde");
span.innerHTML = "Proceso completado";
form.reset();
form.querySelector(".barra").style.display = "none"; // Asegúrate de seleccionar el elemento correcto
form.style.pointerEvents = "auto"; // Reactiva el formulario
form.setAttribute("data-id", "truth");
form.querySelector(".libret").style.display = "none"; // Selección específica del formulario
$(".wunner").css({"position": "absolute", "height": "100%", "width": "100%"});
form.querySelector(".pos1").checked = true; // Selección específica
form.querySelector(".lt1").style.display = "block"; // Selección específica
form.querySelector(".lt2").style.display = "none"; // Selección específica
$(".flecha").html("Publicando post").css({"display": "block","color":"#000"});
form.querySelector("#requid").required = true; // Selección específica
proonk();
});
// Enviar datos
peticion.open("post", "upload.php");
peticion.send(new FormData(form));
// Cancelado
boton_cancelar.addEventListener("click", () => {
peticion.abort();
barra_estado.classList.remove("barra_verde");
barra_estado.classList.add("barra_roja");
span.innerHTML = "proceso cancelado";
});
}
arreglalo aqui bro, asi como esta funciona bien pero me muestra la barra de otro form
