Блог

Главная - Вопросы по программированию - Входной файл не запускает функцию, если он пуст

Входной файл не запускает функцию, если он пуст

#javascript #function #file #input #is-empty

Вопрос:

Если я вставляю png, он работает, если я вставляю jpg, он работает, но если я оставляю файл пустым, он не работает, почему? Файл должен быть png или пустым.

 function myFunction() {
  var fileTypecheck = document.getElementById("file").files[0].type.replace(/(.*)//g, '');
  
  if(fileTypecheck == "png" || fileTypecheck.length == 0){
  
      alert("File is png or 0");
  }else{
      alert("File is NOT png or 0");
  }
} 
 <input type="file" name="file" id="file"  onchange="loadFile(event)" accept="image/png">

<button onclick="myFunction()">Click me</button>

Комментарии:

1. Подсказка: files[0]

2. Что значит «это не работает»? Вы получаете сообщение об ошибке? Если да, то какое сообщение об ошибке? На первый взгляд, проблема в том, что вы пытаетесь получить доступ к свойству files[0] без предварительной проверки, которое files имеет длину. Если файлы не выбраны, то files будет пустой массив, поэтому files[0] будет неопределенным, что означает, что добавление .type выдаст ошибку. Рассмотрите возможность использования дополнительной цепочки .

Ответ №1:

Когда файла нет, индекс files[0] не сохраняется. Вы можете добавить знак вопроса (Optional_chaining) files[0] , чтобы он не ломался при отсутствии файлов. Затем вы можете изменить fileTypecheck.length== 0 на !fileTypecheck , поскольку он будет неопределенным, если файла нет.

 function myFunction() {
  var fileTypecheck = document.getElementById("file").files[0]?.type.replace(/(.*)//g, '');
  
  if(fileTypecheck == "png" || !fileTypecheck){
  
      alert("File is png or 0");
  }else{
      alert("File is NOT png or 0");
  }
} 
 <input type="file" name="file" id="file" accept="image/png">

<button onclick="myFunction()">Click me</button>

Ответ №2:

Когда у an <input type="file"/> нет выбранных файлов, его HTMLInputElement.files свойство пусто, так files[0] и есть undefined .

Кстати, вы не должны полагаться на браузер, который всегда точно сообщает вам тип файла: браузеры обычно заполняют File.type свойство из реестра типа file-extension-to-MIME-типа своей хост-ОС, который ненадежен и часто устарел.

Тем не менее, измените свой код на это: обратите внимание, что я добавил шаги защитного программирования, чтобы на самом деле проверять вещи, а не делать предположения:

 function myFunction() {

    const inp = document.getElementById("file");
    if( !inp || inp.type !== 'file' ) throw new Error( "'file' input element not found." );
    
    if( inp.files.length !== 1 ) {
        alert( "Please select a single file first." );
        return;
    }

    const file = inp.files[0];
    if( file.type === 'image/png' ) {
        // OK
    
    }
    else {
        alert( "Please select a PNG file." );
    }
}
Метки: ,