Cómo verificar si el archivo de entrada está vacío en jQuery

100

Nuevo en JS.
Estoy tratando de verificar si el elemento de entrada del archivo está vacío al enviar el formulario con jQuery / JavaScript. He pasado por un montón de soluciones y nada me funciona. Estoy tratando de evitar el /c/fakepath(a menos que no haya otra opción)

<input type="file" name="videoFile" id="videoUploadFile" />

Esto no funciona:

var vidFile = $("#videoUploadFile").value;

La única forma en que puedo obtener el nombre del archivo es si uso lo siguiente:

var vidFile = document.getElementById("videoUploadFile").files[0].name;

Si no hay ningún archivo disponible, el código arroja un error:

no se puede leer el nombre de la propiedad de indefinido

lo que tiene sentido porque la matriz no está configurada. pero no puedo averiguar cómo hacer ningún manejo de errores con esto.

¿Cómo tomo correctamente el elemento de entrada del archivo videoUploadFile, verifico si está vacío, arrojo un mensaje de error si está vacío?

javascript jquery html

— usuario3753569
fuente

7

Compruebe .files.length?

— Teemu

5

¿Por qué alguien rechazaría esta pregunta? A veces no lo entiendo. Te voté a favor de nuevo a 0.

— Seano666

también puede filtrar archivos no vacíos si tiene más de uno en el formulario:var files = $('#formbody').find('input[type=file]').filter(function() { return $(this)[0].files.length > 0; });

— Piotr Kowalski

177

Simplemente verifique la propiedad de longitud de archivos , que es un objeto FileList contenido en el elemento de entrada

if( document.getElementById("videoUploadFile").files.length == 0 ){
    console.log("no files selected");
}

— Patrick Evans
fuente

1

( document.getElementById("videoUploadFile").files.length === 0 )

— Pathros

140

Aquí está la versión de jQuery:

if ($('#videoUploadFile').get(0).files.length === 0) {
    console.log("No files selected.");
}

— Salim
fuente

1

Esta respuesta es más apropiada ya que el OP solicitó una solución JQuery.

— Hussain Akbar

$('#videoUploadFile').get(0)lo mismo que, $('#videoUploadFile')[0]pero quizás get()hace algunos controles de cordura

— zanderwar

18

Para comprobar si el archivo de entrada está vacío o no mediante el uso de la propiedad de longitud del archivo, indexdebe especificarse de la siguiente manera:

var vidFileLength = $("#videoUploadFile")[0].files.length;
if(vidFileLength === 0){
    alert("No file selected.");
}

— Mamun
fuente

3

Preguntas: ¿cómo comprobar si el archivo está vacío o no?

Respuesta: He resuelto este problema usando este código Jquery

//If your file Is Empty :     
      if (jQuery('#videoUploadFile').val() == '') {
                       $('#message').html("Please Attach File");
                   }else {
                            alert('not work');
                   }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" id="videoUploadFile">
<br>
<br>
<div id="message"></div>

Expandir fragmento

— Adnan Limdiwala
fuente

1

Una explicación adicional sobre por qué esto funcionaría o qué estaba mal en la pregunta original ayudaría a mejorar la calidad de esta respuesta.

— Josh Burgess

@josh burgess esta respuesta fue cómo verificar que el archivo esté vacío o no es otra forma de verificar su archivo cuando envía un formulario usando jquery.

— Adnan Limdiwala

@JoshBurgess el OP pregunta cómo hacer esto en jQuery. Todas las demás respuestas usan vainilla JS o una combinación de JS y jQuery. Este es el único que usa jQuery exclusivamente. Tal vez soy exigente, pero no me gusta mezclar jQuery con Vanilla JS a menos que realmente tenga que hacerlo.

— Eduard Luca

@EduardLuca La respuesta tiene más de dos años. Estaba marcado como de baja calidad en ese momento. La comunidad SO generalmente aprecia una explicación del código, y el comentario fue un recordatorio útil no solo para publicar el código, sino para explicar qué es el código y por qué funciona. Espero que ayude a aclarar las cosas.

— Josh Burgess

3

Sé que llego tarde a la fiesta, pero pensé en agregar lo que terminé usando para esto, que es simplemente verificar si la entrada de carga del archivo no contiene un valor veraz con el operador not y JQuery así:

if (!$('#videoUploadFile').val()) {
  alert('Please Upload File');
}

Tenga en cuenta que si está en un formulario, es posible que también desee ajustarlo con el siguiente controlador para evitar que se envíe el formulario:

$(document).on("click", ":submit", function (e) {

  if (!$('#videoUploadFile').val()) {
  e.preventDefault();
  alert('Please Upload File');
  }

}

— Joel Youngberg
fuente