0

Basado en este código como podría modificarlo, para que me "carge" archivos, y que no dependa de un formulario, se pretende evitar la carga del formulario, y que solo tome el archivo y lo envié a la función en php que se encarga de subirlo al servidor.

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

});
});

function subir_archivos(form, enviarParametros) {


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();
let datos = new FormData(form);
datos.append("parametros", JSON.stringify(enviarParametros));
//datos.append("archivo");

//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 Archivo

peticion.open('post','subir.php');
const url = 'subir.php';
const files = document.getElementById('archivo').files
const formData = new FormData()

for (let i = 0; i < files.length; i++) {
    let file = files[i];

    formData.append('files[]', file);
formData.append('parametros', ruta_archivo);
formData.append('parametros', tamanio_archivo);
formData.append('parametros', extension_archivo);
peticion.send(datos);
}

fetch(url, {
    method: 'POST',
    body: formData,
    data: datos,
}).then(response => {
    return response.text();
}).then(data => {
    console.log(data);
});

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

}

En el Header me regresa esto: [object FileList] y al chequearlo en el preview solo veo esto Array ( ), supongo que puede traer un valor pero no imprime nada en pantalla.

Se agradece la ayuda. Gracias

Ya revisado como indico el compañero Triby envia los datos de manera correcta y se reciben en el PHP este es el codigo mas simple que tengo para procesar el archivo...

<?php
$enviarParametros = json_decode($_POST['parametros'],true);

$ruta =  $enviarParametros['ruta'];   <<-- Aquí recibe el parametro sin problema..
$extensiones = $enviarParametros['extension']; <-- Aquí recibe el parametro sin problema..
$tamanio =  $enviarParametros['tamanio'];  <-- Aquí recibe el parametro sin problema..
   
if(!empty($_FILES)) {

                $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, $ruta. $archivo_nombre);  <<-- Esta linea es la única que si funciona el archivo es dirigido a donde se indica.
  }

En cambio si agrego la sientes lineas:

if (in_array($archivo_extension, $extensiones))  <<--- Aquí me indica que:  Warning: in_array() expects parameter 2 to be array, string given in C:\xampp\htdocs\Subir_archivos\subir.php on line <i>35</i>
{  

// No entra y no ejecuta esta linea....
    move_uploaded_file($archivo_nombre_temporal, $ruta. $archivo_nombre);

}

4
  • Haz un var_dump($extensiones); para ver lo que estás recibiendo.
    – Triby
    Commented el 26 oct. 2020 a las 22:25
  • @Triby Esta que me imprime el var_dump var_dump($extensiones); == string 'pdf' (length=3) y el var_dump($tamanio); === int 1024.
    – Cesarin
    Commented el 26 oct. 2020 a las 22:51
  • Entonces, la comparación debería hacerse directamente: if ($archivo_extension == $extensiones)
    – Triby
    Commented el 26 oct. 2020 a las 23:04
  • Estoy haciendo un debug, en el PHP y me muestra esto: if ($_FILES['archivo']['type'] === $extensiones);{ $extensiones: "pdf" $errors[] = 'La extension no corresponde: ' .$file_name . ' ' .$file_type; }
    – Cesarin
    Commented el 26 oct. 2020 a las 23:23

1 respuesta 1

1

Enviar files en la petición no es suficiente, debes asociar cada elemento a una variable que se pueda interpretar desde el servidor.

Ya que estás intentando con FormData, agrega el archivo usando el método FormData.append(). Ten en cuenta que no importa si el input tiene atributo multiple o no, la propiedad .files siempre es una lista tipo FileList, por lo que debes usar índice para acceder:

Actualización: De acuerdo a como quedó tu pregunta con la última edición, ya tienes declaradas las variables que deseas enviar: ruta_archivo, tamanio_archivo y extension_archivo, entonces envíalas como parámetros de la función para agregarlas a formData:

function subir_archivos(ruta_archivo, tamanio_archivo, extension_archivo) {
    // files es una lista
    const files = document.getElementById('archivo').files
    const formData = new FormData()

    // Agregar archivo a formData, índice cero (primer archivo... o único)
    formData.append('archivo', files[0]);
    // Agregas los parámetros por nombre, valor
    // Nombre: Cadena como lo quieres recibir en PHP
    // Valor: Contenido de la variable adecuada
    formData.append('ruta_archivo', ruta_archivo);
    formData.append('tamanio_archivo', tamanio_archivo);
    formData.append('extension_archivo', extension_archivo);

    // Petición
    let peticion = new XMLHttpRequest();

    // Aquí deberías agregar escucha de evento para saber cuando
    // la petición finalice y, tal vez, obtener resultado del servidor

    peticion.open('post','subir.php');
    // Enviar formData en la petición
    peticion.send(formData);
}

En PHP vas a poder recibir el archivo en $_FILES['archivo'] y los parámetros en $_POST['ruta_archivo'], $_POST['tamanio_archivo'] y $_POST['extension_archivo']

Importante: Limpia tu código y quédate solo con una opción, ya sea XMLHttpRequest o fetch(), de lo contrario, los problemas van a persistir.

4
  • Buenos Dias @Triby , ya hice un relajo con mi codigo, modifique algunas lineas y al revisar el NETWORK me indica en el HEADER que trae tanto el archivo como los parametros que le estoy pasando, la bronca al final es en el PHP que si bien recibe los parametros, lo que no recibe es el archivo .
    – Cesarin
    Commented el 26 oct. 2020 a las 17:32
  • o al reves si le agrego una linea que trae algo asi fetch(url, { method: 'POST', body: formData, }).then((response) => { console.log(response) }) }) , entonce si me indica un echo que le puse que llego un archivo, pero no me pasan los parametros, y lo que no he podido hacer es meter en el formData los datos que requiero pasar como parametros.
    – Cesarin
    Commented el 26 oct. 2020 a las 17:37
  • Listo @Triby ya coloque el código que tengo actualmente, ya hice la prueba y me muestra los datos separados por cada parámetro: files[]: (binary) parametros: archivos/tmp/ parametros: 1024 parametros: pdf .
    – Cesarin
    Commented el 26 oct. 2020 a las 18:39
  • Tu aproximación era casi adecuada, solo faltaba identificar cada par variable, valor, revisa la respuesta actualizada y, de preferencia, elimina comentarios para no hacer esto muy extenso.
    – Triby
    Commented el 26 oct. 2020 a las 18:54

Tu Respuesta

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

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.