Как мониторить событие выбора файла для input type=file?

Question

[wkololo_4ever]

Есть input type=file, в котором пользователь выбирает файл. Как можно следить за моментом выбора файла? Событие onchange не подходит, ибо нужно вызывать функцию, даже когда пользователь выбирает тот же файл, что и прошлый раз, а не только когда файл новый.

Answer 1

[Денис Инешин]

onChange вполне подходит. Просто нужно сделать в 2 шага:
1. При фокусе очищаем поле
2. Следим за ончейндж, которое сработает даже в случае выбора той же самой картинки. Так как мы очистили поле в первом шаге.

Comments

[wkololo_4ever]

Не знаю, как сам не догадался. Спасибо!

[friday]

А если юзер передумает менять файл и нажмёт cancel?

[wkololo_4ever]

@friday я мониторил событие click, то бишь сначала очищаю, а потом вставляется то, что выбрал пользователь.

[friday]

А если пользователь пришёл в этот инпут по табу?

[wkololo_4ever]

@friday у меня была иная ситуация, был графический элемент, при клике на который вызывался клик на скрытом инпуте.

[wkololo_4ever]

@friday кстати, на счет "А если юзер передумает менять файл и нажмёт cancel?" можно же делать проверку в событие onchage на содержание инпута.

[friday]

Как он скрыт? hidden, display:none или opacity:0, как это часто с type="file" делают? Если последнее, то по табу к нему прийти можно.

[wkololo_4ever]

@friday display:none. Была необходимость сделать видимость не стандартного инпута для выбирания файла.

[Денис Инешин]

display:none нельзя делать, перестанут работать события.

[wkololo_4ever]

@IonDen эм, быть не может. В пн буду на работе гляну точно, но насколько я помню, делал display:none

[friday]

@IonDen dom-события перестанут, а jquery — нет.

[Денис Инешин]

@friday понятно, но лучше так не делать, потому что например если вы решите триггернуть onChange событие в инпуте по нажатию на какую-то другую кнопку, то не сможете.