input file로 같은 걸 2번 선택하면 change가 작동하지 않아요.
9853 단어 HTMLJavaScripttech
처음 선택한 것이 이벤트의value에 들어갔기 때문입니다
반응이 없다는 이유였다.
초단순 샘플 코드
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style></style>
</head>
<body>
<input type='file' id='file-input'></input>
<script src="./index.js"></script>
</body>
</html>
(() => {
const input = document.getElementById('file-input');
input.addEventListener('change', () => {
console.log('change');
})
})();
이렇게 하면 두 번째 선택을 할 때,change는 컨트롤러에 나타나지 않습니다.
따라서 이벤트에 포함된value를 비워서 제거합니다.
js
(() => {
const input = document.getElementById('file-input');
+ input.addEventListener('click', (e) => {
+ e.target.value = '';
+ })
input.addEventListener('change', () => {
console.log('change');
})
})();
같은 파일을 선택하지 않습니까?
나는 본래 같은 파일을 선택할 필요가 없다고 생각한다.
그러나 선택할 때마다 선택한 파일의 대화상자 등을 터치할 때 대화상자에서 한 번 취소해도 input에 파일 정보를 저장합니다.
같은 파일을 선택하고 대화상자를 표시하려면 선택한 파일과 같으면 충돌 이벤트가 발생하지 않기 때문에 대화상자를 표시할 수 없습니다.
따라서 이런 초기화 처리가 중간에 끼면 해결이 필요하다.
참고 자료
Reference
이 문제에 관하여(input file로 같은 걸 2번 선택하면 change가 작동하지 않아요.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://zenn.dev/nana/articles/2b2cc0add0f5b5텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
