HTML <입력 유형 = '파일'> 파일 선택 이벤트

144

이 코드가 있다고 가정 해 봅시다.

<form action='' method='POST' enctype='multipart/form-data'>
    <input type='file' name='userFile'><br>
    <input type='submit' name='upload_btn' value='upload'>
</form>

결과는 다음과 같습니다.

찾아보기 및 업로드 버튼을 보여주는 이미지

사용자가 '찾아보기 ...'버튼을 클릭하면 파일 검색 대화 상자가 열립니다.

파일이 선택된 파일 검색 대화 상자를 보여주는 이미지

사용자는 파일을 두 번 클릭하거나 '열기'버튼을 클릭하여 파일을 선택합니다.

파일을 선택한 후 알림을받을 수있는 Javascript 이벤트가 있습니까?

javascript html javascript-events

— 달
소스

5

펑키 한 오래된 윈도우 UI!

— El-Burritos

@ El-Burritos 2010 년에 게시되었습니다. 물론, 그것은 오래된 Windows UI입니다 : D

— Simon Cheng

181

변경 이벤트를 듣습니다.

input.onchange = function(e) { 
  ..
};

— 아누 라그
소스

3

여기서 우리는 자바 스크립트 태그에 .. 그것을 쓰는거야

— 문

5

스크립트 태그에 예가 있거나 <input type="file" onchange="..." />권장하지는 않지만이를 속성 ( ) 으로 추가 할 수 있습니다 .

— Anurag

7

IE7 및 8에서는 'change'이벤트가 폼 이벤트에 영향을 미치지 않습니다. <input> 태그에 리스너를 넣어야합니다.

— xer0x

36

사용자가 파일을 "다시로드"해야하는 경우는 어떻습니까? onchange는 트리거되지 않지만 처음로드하는 것처럼 여전히 다시로드해야합니다.

— bryc

11

파일이 변경되지 않았기 때문에 사용자가 동일한 파일을 연속으로 두 번 이상 선택하면 작동하지 않습니다.

— bob0the0mighty

45

파일을 다시로드해야 할 때 입력 값을 지울 수 있습니다. 다음에 파일을 추가하면 '변경시'이벤트가 트리거됩니다.

document.getElementById('my_input').value = null;
// ^ that just erase the file path but do the trick

— 클렘
소스

5

그것은 잘 작동하지만 이상한 IE <11 동작을 알고 있습니다. 입력 값을 변경할 수 없으므로 해결 방법이 필요할 것입니다. stackoverflow.com/questions/9011644/…

— Oleksandr Tkalenko

15

jQuery 방법 :

$('input[name=myInputName]').change(function(ev) {

    // your code
});

— 자논
소스

3

취소를 클릭해도 변경 이벤트가 호출됩니다.

— 앤서니
소스

2

질문 코드 스 니펫

— DevDig

@anthony는 다음 시나리오를 참조한다고 생각합니다. 파일을 선택하십시오. 이제 파일 선택기를 다시 열지 만 이번에는 취소를 클릭하십시오. 두 번째로 선택된 파일이 없으므로 파일 입력 컨트롤이 재설정되어 초기 선택이 변경되고 변경 이벤트가 시작됩니다.

— dvlsc

Chrome 83에서 시도했지만 취소 버튼을 클릭해도 이벤트가 시작되지 않습니다. 이 답변은 꽤 오래되었으며 적어도 Chrome에서는 수정 된 것 같습니다.

— Saeed Ahadian

3

그것이 순수한 JS로 내가 한 방식입니다.

var files = document.getElementById('filePoster');
var submit = document.getElementById('submitFiles');
var warning = document.getElementById('warning');
files.addEventListener("change", function () {
  if (files.files.length > 10) {
    submit.disabled = true;
    warning.classList += "warn"
    return;
  }
  submit.disabled = false;
});

#warning {
    text-align: center;
}

#warning.warn {
	color: red;
	transform: scale(1.5);
	transition: 1s all;
}

<section id="shortcode-5" class="shortcode-5 pb-50">
    <p id="warning">Please do not upload more than 10 images at once.</p>
    <form class="imagePoster" enctype="multipart/form-data" action="/gallery/imagePoster" method="post">
        <div class="input-group">
  	    <input id="filePoster" type="file" class="form-control" name="photo" required="required" multiple="multiple" />
	    <button id="submitFiles" class="btn btn-primary" type="submit" name="button">Submit</button>
        </div>
    </form>
</section>

스 니펫 확장

— 리가 보이
소스