0

Tengo un input file que esta con un php donde hay un "move_uploaded_file" que mueve los archivos a una carpeta, cuando la persona sube un archivo se puede visualizar el progreso de subida con una Bar Progress hecho en JS y desde ese mismo tengo las condicionales pero quiero agregar una condición en JS que verifique que ya este un vídeo en esa carpeta... que si la persona sube un vídeo y va a volverlo hacer saque el alert. se que puedo tenerlas en el php y las tengo pero haciendo ahí igual va a ver una animación de subida del bar progress que es lo que no quiero. y muchas gracias por su atención !!

extensiones_permitidas = new Array(".mp4",".avi",".webm");
mierror="";

  if (!archivo){
      mierror = "Debes selecionar un archivo";
      alert(mierror);
  }if(file.size > 3221225472){
    mierror = "El archivo debe ser inferior a 3 GB";
    alert(mierror);
  }else{
      extension=(archivo.substring(archivo.lastIndexOf("."))).toLowerCase();
      permitida = false;
      if ((extension == extensiones_permitidas[0]) || (extension == extensiones_permitidas[1]) || (extension == extensiones_permitidas[2])) {
          permitida = true;
      }
  }
  if (!permitida) {
      mierror = "Comprueba la extension de los archivos a subir, Solo se pueden subir con extenciones: " +extensiones_permitidas.join();
      alert (mierror);
  }else {
    ...
    *Funciones del bar porgress...*
    ...
    ajax.open("POST", "subir.php");
  } 
2
  • Quieres verificar si ya hay un video en esa carpeta, o lo que quieres verificar es si ya tienes un video con el mismo nombre y extension en esa carpeta?
    – Layer
    Commented el 23 abr. 2020 a las 4:58
  • Verificar si ya tengo un vídeo con el mismo nombre en la carpeta, con l a extensión puede ser un buen extra c: Commented el 23 abr. 2020 a las 15:35

2 respuestas 2

0

 Indagando un poco en la web he conseguido ayuda en este blog, lo cual contiene lo básico para mostrar una barra de progresión para la carga de archivos, puedes empezar con eso y alterar el diseño de la barra.

uploadForm.onsubmit = event => {
    event.preventDefault();
    if (!files.files.length) {
        uploadForm.querySelector('.result').innerHTML = 'Selecciona un archivo';
    } else {
        let uploadFormDate = new FormData(uploadForm);
        let request = new XMLHttpRequest();
        request.open('POST', uploadForm.action);
        request.upload.addEventListener('progress', event => {
            uploadForm.querySelector('button').innerHTML = 'Uploading... ' + '(' + ((event.loaded/event.total)*100).toFixed(2) + '%)';
            uploadForm.querySelector('.progress').style.background = 'linear-gradient(to right, #25b350, #25b350 ' + Math.round((event.loaded/event.total)*100) + '%, #e6e8ec ' + Math.round((event.loaded/event.total)*100) + '%)';
            uploadForm.querySelector('button').disabled = true;
        });
        request.onreadystatechange = () => {
            if (request.readyState == 4 && request.status == 200) {
                uploadForm.querySelector('.result').innerHTML = request.responseText;
            }
        };
        request.send(uploadFormDate);
    }
};
-1

Lo primero de todo, no puedes comprobar si un archivo existe con javascript puro, ya que javascript no tiene acceso por motivos de seguridad al sistema de archivos de la computadora, lo otro es que aunque javascript tuviera acceso al sistema de archivos del pc, no tiene acceso remoto a ellos, por lo que podrías acceder a los archivos de tu sistema pero no a los de tu servidor, cosa que no es lo deseado...

Aunque lo que si puedes hacer es desde el mismo PHP que no se especifica en las etiquetas de la pregunta, (veo que usas la función move_uploaded_file para ello por eso descubrí que es php), puedes comprobar si el archivo ya existe.

Entonces respecto a la pregunta de como hacer para comprobar si un archivo ya existe en el directorio, tienes dos opciones:

La primera es mandar solo el nombre actual del archivo hacía php y mediante php comprobar si ese archivo se encuentra en la carpeta que quieras comprobar que se encuentre, luego si es o no así (en cualquiera de los dos casos), enviar una respuesta al frontend diciendole ya sea si el archivo existe o no.

Y una vez hecho esto, hacer una segunda petición o no (depende de la respuesta que nos haya dado el servidor), subir el archivo o no.

La otra opción es simplemente comprobar todo esto mismo siempre en el backend, es decir, desde PHP comprobar siempre si existe el archivo, y si no existe de una vez mover el archivo subido, en caso de que exista simplemente devolverle al backend una respuesta que diga que el archivo ya existe y no mover el archivo.

Voy a centrarme en el segundo, así que lo que planteo en estas palabras se puede ver de la siguiente manera:

hacemos la petición ajax con los archivos tal cuál como siempre la haces:

ajax.open("POST", subir.php);

una vez lleguen los archivos a php, supongamos que nuestros videos o archivos se guarden en una carpeta llamada archivos que este al lado de nuestro subir.php, entonces lo que podemos hacer para saber si el archivo con el mismo nombre ya existe es usar la función file_exists() de php que nos permite saber exactamente eso, entonces tomemos por ejemplo un solo archivo y cojamosle su nombre:

<?php

    header('Content-type:application/json;charset=utf-8');

    $file1 = $_FILES['file1'];
    $nombreFile = $file1['name'];
    $carpetaArchivos = "/archivos";

    if(file_exists("$carpetaArchivos/$nombreFile")){
        //Si llegamos aquí el archivo con el mismo nombre y extension existe.
        echo json_encode(['existe' => true]);
        die();
    }else{
        //Quiere decir que no hay algún archivo con el mismo nombre y extensión

        //Hacer las operaciones que requieras hacer y luego...

        //Enviar la respuesta
        echo json_encode['existe' => false, 'uploaded' => 'true'];
    }

?>

Como vemos es bastante sencillo con esta función, solo debes cuidar que la carpeta exista.

En caso de que quieras hacer lo de la primera opción, solo deberás enviar el nombre del archivo que quieres comprobar mediante javascript y no el archivo entero, que para saber el nombre del archivo que se tiene actualmente guardando en files de tu input puedes hacerlo así:

/*
  Supongamos que tu función que se encarga de recoger los,
  archivos cada vez que cambien en tu input file sea esta,
  entonces así podemos obtener el nombre de por ejemplo el
  primer archivo subido:
*/
handleFiles(ev){
    const nombrePrimerArchivo = ev.currentTarget.files[0].name;
}

Con esto ya sabemos entonces que podemos hacer y como lo podemos hacer, ya solo es cuestión de enviar este nombre para que se compruebe en el servidor y que el servidor nos devuelva la respusta para hacer lo pertinente en javascript.

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.