JavaScript - Получение имени файла и расширения из input type="file"

Вы можете использовать метод substring и lastIndexOf, чтобы сократить код:

let fileName = "profile.png";
let extension = fileName.substring(fileName.lastIndexOf('.') + 1);

Этот код эффективно извлекает расширение файла с использованием меньше строк.

Этот пост немного устарел, но для информации:

var files = event.target.files;
var filename = files[0].name;
var extension = files[0].type;

В extension вы найдете тип файла. Например, если это изображение в формате JPEG, то:

extension = image/jpeg

Или если это PDF, то:

extension = application/pdf

Чтобы получить только расширение, используйте extension.replace(/.*\//g, '');. Это вернет нужное значение.

Ваш код правильно извлекает расширение файла из пути, введенного в элемент с идентификатором inputFile. Однако, как вы правильно заметили, он может работать некорректно, если в имени файла есть несколько точек.

Если ваше имя файла, например, example.test.txt, то код вернет txt, что может быть не всегда желаемым поведением, особенно если вы хотите получить расширение самого файла.

Вместо этого вы можете рассмотреть возможность использования метода split для получения последнего элемента массива:

var filePath = $("#inputFile").val();
var file_ext = filePath.split('.').pop();
console.log("File Extension ->-> " + file_ext);

Этот подход всегда будет извлекать последнее расширение файла, независимо от того, сколько точек содержится в имени файла. Если вы хотите обработать случаи, когда файл может не иметь расширения, вы можете добавить дополнительную проверку:

var filePath = $("#inputFile").val();
var parts = filePath.split('.');
var file_ext = parts.length > 1 ? parts.pop() : ''; // Если расширение отсутствует, вернем пустую строку
console.log("File Extension ->-> " + file_ext);

Таким образом, ваш код будет более устойчивым к ситуациям со сложными файлами.

Для того чтобы получить имя файла и разделить его на различные части, выполните следующие шаги:

const media_file = event.target.files[0]; // event получен из события <input>
const filename = media_file.name;

let last_dot = filename.lastIndexOf('.'); // Находим последний индекс точки
let ext = filename.slice(last_dot + 1); // Получаем расширение файла
let name = filename.slice(0, last_dot); // Получаем имя файла без расширения

В этом коде мы сначала извлекаем файл из события ввода (<input>), затем находим его имя и определяем место последней точки, чтобы отделить расширение от самого имени файла. После чего с помощью slice можно получить как имя файла, так и его расширение.

Для получения расширения файла и его имени из объекта события можно использовать следующий код:

var files = event.target.files[0]; // Получаем первый файл из списка
var fileExtension = files.type.split("/").pop(); // Извлекаем расширение файла
var fileName = files.name; // Получаем имя файла

Этот код сначала обращается к объекту event, получает первый файл и разделяет его тип по символу "/". Затем с помощью pop() мы извлекаем последнее значение, которое и будет расширением файла. Имя файла можно получить напрямую через свойство name.