Получить имя изображения загружаемого с помощью input[type="file"]

Question

Как с помощью регулярных выражений или другим способ получить имя изображения, загружаемого с помощью input[type="file"]. Например, скачиваем картинку, полное имя будет например такое: C:\fakepath\jbat006 (1).jpg.

Цифра 1 в скобках появляется если скачиваем одно и то же изображение 2 раза.

Как оставить только jbat006? Сам путь отсекается так val.replace(/.*[\/\\]/, ''), как вместе с тем, избавиться еще от правой части (" (1).jpg").

Answer 1

Вы можете получить имя файла из самого инпута. Подробнее можно почитать тут. Вообще, мне кажется, что тут можно обойтись и без регулярок, но ниже решение с ними.

let pattern = /((?:.(?!\(\d+\)))+.)(?:\(\d+\))?\..+/
document.querySelector('.input').onchange = function(){
  document.querySelector('.preview')
  .textContent = this.files[0].name.match(pattern)[1]
}

<input type='file' class='input'>
<div class='preview'></div>

Answer 2

Вы можете использовать

var val = "C:\\fakepath\\jbat006 (1).jpg";
console.log(val.replace(/^.*[\/\\]| \(\d+\)\.\w+$/g, ''));
// => jbat006

Подробности

^ - начало строки
.*[\/\\] - 0 и более символов, отличных от символов перевода строки, как можно больше, до последнего \ or / в строке
| - или
( - строка (
\d+ - 1 и более цифр
\)\. - строка ).
\w+ - 1 и более букв/цифр/_
$ - конец строки

БЛОГ НА HUSL

Получить имя изображения загружаемого с помощью input[type="file"]

Ответы (2 шт):