Js получить расширение файла
Обновлено: 04.07.2024
Получить расширение загруженного файла в Javascript. В веб-приложении мы используем тег формы для сохранения пользовательского ввода. Тег основной формы содержит текстовое поле, текстовое поле и входной файл .ie ( загрузка файла ) и т. д. При вводе данных пользователи могут загружать файлы любого формата, поэтому нам необходимо проверить его на стороне клиента, а также на стороне сервера. Мы, как разработчик, знаем, какое расширение файла или тип файла следует загружать на соответствующую веб-страницу. Итак, в этой статье вы узнаете, как получить расширение загруженного файла в javascript.
Для этого необходима проверка файла, а для этого нам нужно знать расширение загруженного файла, т.е. хотим ли мы загрузить только файл jpg или excel, или файл CSV или любой другой файл в формате с определенным расширением. Здесь, в этой статье, мы узнаем, как получить расширение файла в Javascript (на стороне клиента), чтобы мы могли его проверить.
Для этого мы используем два разных подхода.
Два способа получить расширение файла.
- Используйте регулярное выражение для получения типа файла.
- Использование метода разделения и извлечения для получения типа файла.
Разметка HTML:
Здесь мы добавили тег формы с элементом управления загрузкой файла и тегом кнопки. При нажатии кнопки мы вызываем метод getFileExtention, который выдает предупреждающее сообщение и отображает расширение загруженного файла.
Код выглядит так, как показано ниже.
Способ 1: использование регулярного выражения для получения расширения файла
Код JavaScript:
Метод 2: использование метода разделения и извлечения для получения типа файла.
Здесь мы используем метод split() и точку (.) в качестве разделителя, а с помощью метода pop() получаем расширение.
Код JavaScript:
Заключение. Здесь мы показали, как получить расширение файла с использованием и без использования регулярных выражений в javascript. Это также можно использовать для проверки файлов при загрузке файлов.
Спасибо за чтение, пожалуйста, продолжайте посещать этот блог и делитесь им в своей сети. Кроме того, я хотел бы услышать ваше мнение в комментариях.
PS: Если вы нашли этот контент ценным и хотите поблагодарить меня? 👳 Купи мне кофе
Подпишитесь на нашу рассылку
Получайте самые свежие и лучшие новости из Codepedia прямо в свой почтовый ящик.
Ваш адрес электронной почты не будет опубликован. Обязательные поля отмечены *
Редактировать: просто потому, что это принятый ответ; ответ Уолласера действительно намного лучше:
Редактировать: в ответ на комментарий PhiLho используйте что-то вроде:
@JustAndrei Еще не все :) Для чистого имени файла (базовое имя?), а не пути, из практических соображений я думаю, что это должно быть return filename.substring(0,1) === '.' ? '' : имя_файла.split('.').slice(1).pop() || ''; Это также касается файлов .file (я полагаю, скрытых Unix). Это если вы хотите, чтобы это было однострочным, что, на мой взгляд, немного беспорядочно.
Изменить:
Это еще одно решение без регулярных выражений, которое я считаю более эффективным:
Есть некоторые крайние случаи, которые лучше обрабатываются ответом VisioN ниже, особенно файлы без расширения (включая .htaccess и т. д.).
Он очень эффективен и, возможно, лучше обрабатывает угловые случаи, возвращая "" вместо полной строки, когда перед точкой нет точки или строки. Это очень хорошо продуманное решение, хотя и трудночитаемое. Вставьте его в свою библиотеку помощников и просто используйте.
Старое редактирование:
Более безопасная реализация, если вы собираетесь столкнуться с файлами без расширения или со скрытыми файлами без расширения (см. комментарий VisioN к ответу Тома выше), будет примерно такой:
Если a.length равно единице, это видимый файл без расширения, т.е. файл
Если a[0] === "" и a.length === 2, это скрытый файл без расширения, т.е. .htaccess
Это должно устранить проблемы с немного более сложными случаями. С точки зрения производительности, я думаю, что это решение немного медленнее, чем регулярное выражение в большинстве браузеров. Однако для большинства распространенных целей этот код вполне удобен.
но в этом случае имя файла выглядит как filname.tes.test.jpg. Пожалуйста, рассмотрите вывод. Я надеюсь, что это будет ложью.
Отлично! Большое спасибо. Приятно видеть решение, не использующее регулярное выражение; Я сделал это с PHP, и он использует только пару функций. +1
@wallacer: Что произойдет, если имя файла на самом деле не имеет расширения? Не будет ли это просто возвращать базовое имя файла, что было бы довольно плохо?
Следующее решение достаточно быстрое и короткое, чтобы его можно было использовать в массовых операциях и сэкономить лишние байты:
Вот еще одно универсальное решение без регулярных выражений:
Оба варианта корректно работают с именами без расширения (например, myfile) или с именами, начинающимися с . точка (например, .htaccess):
Если вас волнует скорость, вы можете запустить тест и убедиться, что предоставленные решения являются самыми быстрыми, а короткое решение чрезвычайно быстрым:
Как работает короткая версия:
-
Метод возвращает последнюю позицию подстроки (т.е. "." ) в заданной строке (т.е. fname ). Если подстрока не найдена, метод возвращает -1 .
- Неприемлемыми позициями точки в имени файла являются -1 и 0 , которые соответственно относятся к именам без расширения (например, "name" ) и к именам, начинающимся с точки (например, ".htaccess" ). ( >>> ) при использовании с нулем влияет на преобразование отрицательных чисел -1 в 4294967295 и -2 в 4294967294 , что полезно для сохранения имени файла неизменным в крайних случаях (здесь своего рода трюк). извлекает часть имени файла из позиции, которая была рассчитана, как описано. Если номер позиции больше длины строки, метод возвращает "" .
Если вам нужно более четкое решение, которое будет работать таким же образом (плюс с дополнительной поддержкой полного пути), проверьте следующую расширенную версию. Это решение будет медленнее, чем предыдущие однострочники, но его гораздо проще понять.
Все три варианта должны работать в любом веб-браузере на стороне клиента, а также могут использоваться в коде NodeJS на стороне сервера.
@mrbrdo Этот метод не должен работать с полным путем только с именами файлов, как того требует вопрос. Внимательно прочитайте вопрос, прежде чем голосовать против.
Зачем тратиться на оптимизацию такой тривиальной строчки кода? Операторы тильды и битового сдвига так редко встречаются в JavaScript, что я не могу поддержать такой ответ. Если для объяснения того, как работает 1 строка кода, требуется 5 пунктов, лучше переписать код, чтобы он действительно был понятен.
Скорость этой одной строки не будет иметь заметного значения в любом приложении. Bitwise используется настолько редко, что популярные линтеры, такие как JSLint и JSHint, предостерегают от их использования. Зацикленность на производительности и компактности этой логики ухудшила качество кода; если код требует «дополнительного изучения», я считаю его «плохим».
@Jackson Учитывая, что это сайт, предлагающий несколько решений проблемы, иметь решение, которое оптимизирует производительность, никогда не бывает плохо. Ваше утверждение «не будет иметь заметного значения в любом приложении» полностью основано на вашем узком круге возможных приложений, в которых это может быть использовано. другой код, который им нужно создать для приложения, интенсивно использующего вычислительные ресурсы, которое они пишут.
Для этого в модуле path есть стандартная библиотечная функция:
Итак, если вам нужен только формат:
Если расширения нет, то функция вернет пустую строку:
Если вы используете Node, путь уже встроен. Если вы ориентируетесь на браузер, то Webpack соберет для вас реализацию пути. Если вы ориентируетесь на браузер без Webpack, вы можете включить path-browserify вручную.
Нет причин выполнять разбиение строк или регулярное выражение.
Ваш аргумент в пользу того, чтобы не использовать разбиение или регулярные выражения, заключается в том, чтобы включить плагин или связать приложение с узлом, это чрезмерный ответ для черной задачи
Хорошо работает. webpack очень часто уже используется для разработки на стороне клиента, ориентированной на браузеры. Это было установлено много лет назад. У разработчика на стороне сервера, работающего с узлом, уже есть встроенная функция. Зачем дублировать работу, уже проделанную за вас? Я бы не стал использовать веб-пакет только для этого, но если он у вас есть, используйте его.
Если вы имеете дело с веб-адресами, вы можете использовать:
Это может привести к неправильному захвату расширения, если файлы будут называться примерно так: "2021.06.28 - MyReport.csv"
Код
Проверить
Обратите внимание, что в отсутствие запроса фрагмент все еще может присутствовать.
JSLint
Не работает, если у вас есть еще одна косая черта в конце, как что-то закодированное, например: "example.com:8080/segment1/segment2/page.html?enc=abc/def"
Быстро и правильно работает с путями
Некоторые крайние случаи
Решения, использующие split, работают медленно, а решения с lastIndexOf не обрабатывают пограничные случаи.
Я уже перечислил крайние случаи. И ваше решение НЕ обрабатывает их должным образом.Как я уже писал, попробуйте "/dir.with.dot/file". Ваш код возвращает «точка/файл», что до смешного неверно.
Как я уже говорил вам, это никогда не упоминалось явно, и решение, которое обрабатывает пути, очевидно, намного полезнее. Ответ на вопрос о SO должен быть полезен другим людям, помимо человека, задавшего вопрос. Я действительно не думаю, что решение, которое обрабатывает расширенный набор входных данных, должно быть отвергнуто.
Проголосовал против использования глобальной переменной с .exec() . Ваш код будет лучше, как (filename.match(/[^\\/]\.([^\\/.]+)$/) || [null]).pop() .
Я просто хотел поделиться этим.
хотя это имеет недостаток, так как файлы без расширения будут возвращать последнюю строку. но если вы это сделаете, это все исправит:
Насколько я помню, метод slice относится к массивам, а не к строкам. Для строк будет работать substr или substring.
@VisioN, но я думаю, вы должны знать, что есть String.prototype.slice, а также Array.prototype.slice, так что оба метода работают как метод
Чтобы не быть самоуверенным и не хвастаться, но я не видел какого-либо блока кода для этой задачи (поиск 'правильного' расширения файла, среди набора различных входных аргументов функций), который работает так же хорошо, как и этот.
Примечание. По замыслу, если расширение файла не существует для данной входной строки, она просто возвращает пустую строку "" , а не ошибку или сообщение об ошибке.
Строка: fileNameOrURL(не требует пояснений)
Логическое значение: showUnixDotFiles (Показывать или нет файлы, начинающиеся с точки ".")
Примечание (2): Если вам нравится мой код, обязательно добавьте его в свою библиотеку js и/или репозиторий, потому что я много работал над его совершенствованием, и было бы жаль пропадать зря. Итак, без лишних слов, вот оно:
Работа с файлами может быть сложной, поскольку вам придется управлять ими с помощью сценариев на стороне сервера. Однако есть простые способы определить тип или расширение файлов, с которыми вы имеете дело, используя скрипты на стороне клиента, такие как JavaScript и jQuery.
Прежде чем что-либо делать с файлами и их содержимым в веб-приложении, иногда необходимо найти расширение файла. В этой статье мы обсудим 3 различных процедуры, чтобы выяснить, действительно ли это файл, и если это файл, то какого он типа.
01) Использование метода «replace()» строки JavaScript с метасимволами регулярного выражения
Метод replace() обычно заменяет значение в строке другим набором заданных значений. Общий синтаксис этого метода: строка. заменить (значение поиска, новое значение).
Как это может помочь нам найти расширение файла?
Приведенный выше метод принимает два параметра для замены значений данной строки. В этом случае строкой будет само имя файла, а первым параметром будет полное имя файла до последней «точки», а вторым параметром будет пустая строка.
Метасимволы регулярных выражений будут использоваться для извлечения всех символов до тех пор, пока в строке не будет найдена точка. Таким образом, эти символы будут заменены пустой строкой, в результате чего останется расширение файла.
Метасимволы могут сбивать с толку, поэтому их необходимо объяснить. Символы «^.*» означают, что все символы. Комбинация символов «\.» указывает, пока не достигнет «точки». В совокупности это означает «получить все символы в строке, пока не найдет «точку». И эта комбинация записывается внутри 2 косых черт «/» в начале и в конце.
02) Использование методов строки JavaScript «substr ()» и «lastIndexOf ()»
Комбинация двух методов JavaScript также возвращает расширение файла. Метод substr() будет извлекать или извлекать определенные значения из строки.
Общий синтаксис: string.substr( start, length ).
Первый параметр start , будет числовым значением, а второй параметр length также принимает числовое значение.
Метод lastIndexOf() будет искать определенную строку или символ во всей строке и находить позицию данной строки или символа. Он также возвращает числовое значение.
Синтаксис
строка. lastIndexOf (значение поиска, начало);
.lastIndexOf() найдет расположение точки и вернет числовое значение плюс 1, и это числовое значение будет использоваться методом .substr() для возврата оставшихся оставшихся строк.
В приведенном выше примере точка находится на 5-м месте, а .substr() будет извлекать символы, начиная с 5 + 1, т. е. на 6-м месте, и возвращать jpeg .
03) Использование методов JavaScript .split() и .pop()
Метод JavaScript .split() возвращает массив слов (разделенных запятой) путем разделения строки.
Синтаксис
string.split(разделитель, предел);
Первый параметр может быть любым символом, используемым для разделения строки, а второй параметр — числовым значением, определяющим количество элементов, возвращаемых в виде массивов.
Допустим, у нас есть строка Дом там, где Сердце, и мы будем использовать ее с методом.
let фраза = "Дом там, где Сердце";
let Hm = фраза.split(' ', 2);
Результатом будет Home, в виде массива. Он вернул 2 слова из строки. Теперь попробуйте метод .split(), удалив значение 2, и посмотрите на результат.
Метод .pop() возвращает последний элемент массива значений, но его нельзя использовать непосредственно со строкой. Поэтому его нужно использовать с методом .split().
При поиске расширения файла (на основе символа точка ) метод .split() разделит строку « file.jpg » на два разных элемента в массиве, то есть на файл и jpeg . Метод .pop() вернет последний элемент, то есть jpeg. (см. пример)
В разделе разметки я добавил три изображения, файл PDF и файл HTML. Теперь давайте проверим скрипт.
В приведенных выше примерах я использовал регулярные выражения JavaScript, чтобы показать, как находить расширения файлов. Вы можете попробовать оставшиеся 2 процедуры и посмотреть, будут ли результаты такими же. Методы, которые я обсуждал здесь, также можно использовать для различных других проверок. Это на самом деле демонстрирует, как мы можем упростить нашу задачу, используя эти методы.
Эти два решения не могли справиться с некоторыми пограничными случаями, вот еще одно более надежное решение.
Solution3: String slice , методы lastIndexOf
Как это работает?
Сравнение
| Решение | Параметры | Результаты |
|---|---|---|
| Решение 1. Регулярное выражение | '' 'filename' ' filename.txt' '.hiddenfile' 'filename.with.many.dots.ext' | undefined undefined < br />'txt' 'hiddenfile' 'ext' |
| Решение 2. Разделение строки | '' 'filename' 'filename.txt' '.hiddenfile' 'filename.with.many.dots.ext' | '' 'filename' 'txt' 'hiddenfile' 'ext' |
| Решение 3. Строковый фрагмент , lastIndexOf | '' 'filename' 'filename.txt' '.hiddenfile' 'filename.with.many.dots.ext' | '' '' 'txt' '' 'ext' |
