Как проверить, пуст ли входной файл в jQuery


102

Совершенно новый для JS.
Я пытаюсь проверить, пуст ли элемент ввода файла при отправке формы с помощью jQuery / JavaScript. Я прошел через кучу решений, и у меня ничего не работает. Я пытаюсь избежать /c/fakepath(если нет другого варианта)

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

Это не работает:

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

Единственный способ получить имя файла - это использовать следующее:

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

Если файл недоступен, код выдает ошибку:

не может прочитать имя свойства undefined

что имеет смысл, потому что массив не установлен. но я не могу понять, как с этим справиться.

Как мне правильно захватить элемент ввода файла videoUploadFile, проверить, пуст ли он, выдать сообщение об ошибке, если он пуст?


7
Проверить .files.length?
Теему

5
Почему кто-то проголосовал против этого вопроса? Иногда я ТАК не понимаю. Я проголосовал за вас обратно до 0.
Seano666

вы также можете фильтровать непустые файлы, если у вас их несколько:var files = $('#formbody').find('input[type=file]').filter(function() { return $(this)[0].files.length > 0; });
Петр Ковальски,

Ответы:


179

Просто проверьте свойство length of files , которое является объектом FileList, содержащимся во входном элементе.

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

1
( document.getElementById("videoUploadFile").files.length === 0 )
Патрос

140

Вот его версия jQuery:

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

1
Этот ответ более уместен, поскольку OP запросил решение JQuery.
Хуссейн Акбар

$('#videoUploadFile').get(0)то же самое, $('#videoUploadFile')[0]но, возможно, get()делает некоторые проверки вменяемости
zanderwar

18

Чтобы проверить, является ли входной файл пустым, используя свойство длины файла, indexнеобходимо указать следующее:

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

4

Я знаю, что опаздываю на вечеринку, но я подумал, что добавлю то, что в итоге использовал для этого, - просто проверить, не содержит ли ввод для загрузки файла истинное значение с помощью оператора not и JQuery, например:

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

Обратите внимание, что если это находится в форме, вы также можете обернуть его следующим обработчиком, чтобы предотвратить отправку формы:

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

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

}

3

Вопросы: как проверить, что файл пуст или нет?

Ответ: я решил эту проблему, используя этот код 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>


1
Дальнейшее объяснение того, почему это сработает или что было не так в исходном вопросе, поможет повысить качество этого ответа.
Джош Берджесс

@josh burgess, этот ответ заключался в том, как проверить, что файл пуст или нет, - это еще один способ проверить ваш файл при отправке формы с помощью jquery.
Аднан Лимдивала

@JoshBurgess, ОП спрашивает, как это сделать в jQuery. Все остальные ответы либо используют ванильный JS, либо комбинацию JS и jQuery. Это единственный, кто использует исключительно jQuery. Может быть, я разборчив, но мне не нравится смешивать jQuery с ванильным JS, если в этом нет необходимости.
Эдуард Лука

@EduardLuca Ответу больше двух лет. В то время это было отмечено как низкое качество. Объяснение кода обычно ценится сообществом SO, и комментарий был задуман как полезное напоминание не только о том, чтобы опубликовать код, но и для объяснения, что это за код и почему он работает. Надеюсь, что это поможет прояснить ситуацию.
Джош Берджесс
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.