0

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>
Este html carga un ccs e invoca a un js denominado main.js , donde se tiene esto:

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";
    });

}
y este main a su vez llama o carga el archivo php que realiza la acción de subir el archivo "subir.php" este es el codigo contenido aqui.

<?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);
?>
hasta aquí todo trabaja bien, sin problema ,ahora el detalle es que requiero de pasar dos parámetros en especifico la extensión y el tamaño de archivo como parámetro desde una función...para validar el archivo que se esta subiendo. Y pues la verdad no tengo mucha experiencia en javascript escrito de esta manera ya he leído algunos post de varios foros y visto video tutoriales y cada vez me hago mas bolas.

Si alguien pudiera explicarme un poco al respecto se agradece de antemano

1
  • Hola. Todos los parámetros a validar se encuentran en $_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
    – quevedo
    Commented el 11 oct. 2020 a las 21:04

1 respuesta 1

1

1.- Lo que yo te recomiendo es crear una funcion que se llame validarArchivo() esta funcion recibirá como parametro el input file quedando de la siguiente manera, en el codigo te comento cosas esenciales:

function validarArchivo(inputFile) {

  let file = inputFile.files[0];

  /*
    EN LA VARIABLE file VIENE INFORMACION DEL ARCHIVO EJEMPLO:
     - lastModifiedDate
     - name
     - size El tamaño esta dado en KB
     - type
  */

  /*
  REALIZAS LAS VALIDACIONES Y 
  SOLO CUANDO ESTAS SE CUMPLAN RESPONDES VERDADERO
  */

  if (file.type === "image/jpeg") {
    return true;
  } else {
    return false;
  }
}

2.- Necesitamos acceder a tu inputFile para poder obtener el archivo que seleccionó el usuario ejemplo:

let inputFile = document.getElementById("archivo");

3.- En tu evento submit mandas a llamar la funcion validarArchivo() y le pasas como parametro la variable que hay en inputFile quedando de la siguiente manera:

form.addEventListener("submit", function (event) {
    event.preventDefault();

    /*
      SOLO SI LA FUNCION validarArchivo me regresa true
      MANDAMOS EL ARCHIVO
    */ 

    if(validarArchivo(inputFile)){
      subir_archivos(this);
    }else{
      // REALIZAMOS OTRA COSA
    }
    
  });

4.- Si lo que deseas es enviar los parametros de validacion a tu servidor, te recomiendo crear una funcion llamada parametrosValidacion y esta funcion recibirá como parametros tus validaciones, quedando de la siguiente manera:

function parametrosValidacion(ruta, tamanio, extension) {
  return {
    ruta: ruta,
    tamanio: tamanio,
    extension: extension,
  };
}

5.- NOTA que la funcion esta regresando un objeto, el cual sera enviado a tu servidor

6.- Entonces tu funcion de subir_archivos ya no recibira como parametro solo el formulario, si no tambien estos parametros de validacion quedando tu funcion de la siguiente manera:

function subir_archivos(form, parametrosValidacion) {}

7.- Entonces en donde realizas tu submit mandas el formulario y los parametros de la siguiente manera:

form.addEventListener("submit", function (event) {
    event.preventDefault();
    subir_archivos(
      this,
      parametrosValidacion("paramaetro1", "parametro2", "parametro3")
    );
  });

8.- Entonces la manera en la que realizas la petición cambiará te pongo en comentarios en codigo lo que cambiría:

function subir_archivos(form, parametrosValidacion) {
  //Petición
  let peticion = new XMLHttpRequest();

  /*
    AGREGAMOS UNA VARIABLE DATOS ESTO SERA UN FORMDATA
    Y LE PASAMOS EL FORM QUE RECIBIMOS COMO PARAMETRO
    ESTO TE PERMITIRA EN PHP MANEJAR $_FILES PARA
    TU ARCHIVO y $_POST PARA TUS PARAMETROS
 */
  let datos = new FormData(form);

  /*
    OJO CON JSON.stringify
    TENEMOS QUE MANDARLO DE ESTA MANERA
    PARA PODERLO MANIPULAR CORRECTAMENTE
    EN NUESTRO PHP
  */
  datos.append("parametros", JSON.stringify(parametrosValidacion));

  //Progreso
  peticion.upload.addEventListener("progress", (event) => {
    console.log(event.loaded);
  });

  //Finalizado
  peticion.addEventListener("load", () => {});

  //Enviar datos
  peticion.open("post", "app/subirArchivo.php");

  /*
    AHORA LO QUE MANDAREMOS ES datos
    Y datos LLEVA TANTO EL FORMULARIO Y 
    LOS PARAMETROS DE VALIDACION
  */
  peticion.send(datos);
}

9.- AHORA VAMOS CON PHP los archivos los recibes igual $_FILES pero los parametros de validacion los recibiras de esta manera:

$parametrosValidacion = json_decode($_POST['parametros'],true);

10.- Recuerda que mandamos un JSON, tenemos que manejarlo en PHP como tal

11.- Entonces ya puedes acceder a los valores que trae esa varible ejemplo:

echo $parametrosValidacion['ruta'];

12.- Espero haberte ayudado.

NOTA: A TU ARCHIVO LE HICE MODIFICACIONES PARA PODER TESTEARLO EN MI PC SOLO AGREGA LO QUE TE COMENTO EN EL CODIGO

12
  • Así es necesito validar tanto el tamaño como la extensión del archivo que se subirá. Tengo varias dudas, primero como en el HTML poner en una variable tanto el tamaño y la extensión para pasarlas como un parámetro a la función. He visto muchos codigos pero casi todos ponen dentro de script tanto la extension como el tamaño a validar. Este detalle es importante por que se pretende que sea una funcion generica para ser utilizada en muchas secciones de un sistema.
    – Cesarin
    Commented el 12 oct. 2020 a las 16:51
  • Ya tengo las validaciones del lado del cliente, aunque no me las acepto mi jefe, ahora lo que requiero es realizar una funcion en js, digamos validarArchivo.js, dentro de esta colocar los parametros y pasarlos al main.js para que al momento de realizar el submit se envien al archivo subir.php junto con el archivo y asi poder validarlo. Saludos
    – Cesarin
    Commented el 22 oct. 2020 a las 18:33
  • precisamente lo que tu me recomiendas que no haga, es lo que mi jefe quiere que se haga, el uso del send para enviar los parámetros junto con el archivo y que en el subir.php se haga la validación del archivo a cargar al servidor.
    – Cesarin
    Commented el 22 oct. 2020 a las 18:40
  • Interesante tu propuesta, pero tengo duda al respecto que me funcione como lo necesito. El detalle radica en que me pidieron hacer una funcion que traiga dos o tres parametros, por ejemplo validarArchivo(ruta,tamaño,extension), y estos valores definidos previamente ya que se pretende que la funcion se pueda reutilizar en muchos modulos diferentes, envie estos tres parametros al main para que de ahi, sean enviados por post utilizando send al archivo subir.php que es donde se validaria el archivo a subir
    – Cesarin
    Commented el 22 oct. 2020 a las 19:34
  • Ya tengo una validacion muy similar a lo que me comentas, solo que no esta en un archivo si no en el cuerpo del HTML, le envio dos parametros tamaño y extension, al momento en que seleccionas el archivo, se llama y verificar que sea la extension y el tamaño, en caso negativo permanece bloqueado el boton de enviar, y en caso positivo habilita el boton para poder realizar el submit esto es del lado del cliente, ahora necesito que sea del lado del servidor pasando parametros al php
    – Cesarin
    Commented el 22 oct. 2020 a las 19:38

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.