동일한 파일을 선택할 때 HTML 입력 파일 선택 이벤트가 실행되지 않습니다

요소 input유형 의 HTML 에 대해 사용자가 선택한 모든 파일을 감지 할 기회가 file있습니까?

이것은 여러 번 요청되었지만 onchange사용자가 동일한 파일을 다시 선택하면 일반적으로 제안되는 이벤트가 발생하지 않습니다.

의 값을 설정 input으로 null각 onclick이벤트. 동일한 경로를 선택하더라도 input의 값 이 재설정되고 onchange이벤트가 트리거 됩니다.

input.onclick = function () {
    this.value = null;
};

input.onchange = function () {
    alert(this.value);
};​

여기 데모가 있습니다.

참고 : 파일에 'C : \ fakepath \'접두사가있는 경우 정상입니다. 이는 JavaScript가 파일의 절대 경로를 알 수 없도록하는 보안 기능입니다. 브라우저는 여전히 내부적으로 알고 있습니다.

<form enctype='multipart/form-data'>
    <input onchange="alert(this.value); this.value=null; return false;" type='file'>
    <br>
    <input type='submit' value='Upload'>
</form>

this.value=null; Chrome에만 필요하며 Firefox는 다음과 같이 잘 작동합니다. return false;

여기 FIDDLE이 있습니다

이 기사에서 "선택할 때 양식 입력 사용"제목 아래

http://www.html5rocks.com/en/tutorials/file/dndfiles/

<input type="file" id="files" name="files[]" multiple />

<script>
function handleFileSelect(evt) {

    var files = evt.target.files; // FileList object

    // files is a FileList of File objects. List some properties.
    var output = [];
    for (var i = 0, f; f = files[i]; i++) {
     // Code to execute for every file selected
    }
    // Code to execute after that

}

document.getElementById('files').addEventListener('change', 
                                                  handleFileSelect, 
                                                  false);
</script>

그것은 '변경'에 이벤트 리스너를 추가하지만 테스트했으며 동일한 파일을 선택하더라도 취소하지 않고 트리거합니다.

사용자가 필드를 클릭 할 때마다 onClick 이벤트를 사용하여 대상 입력 값을 지 웁니다. 이렇게하면 onChange 이벤트가 동일한 파일에 대해서도 트리거됩니다. 나를 위해 일했다 :)

onInputClick = (event) => {
    event.target.value = ''
}

<input type="file" onChange={onFileChanged} onClick={onInputClick} />

TypeScript 사용

onInputClick = ( event: React.MouseEvent<HTMLInputElement, MouseEvent>) => {
    const element = event.target as HTMLInputElement
    element.value = ''
}

파일이 성공적으로로드 된 후 원하는 작업을 수행하십시오. 예를 들어 당신은이 일을 할 수 있고 매력처럼 나를 위해 일했습니다.

   $('#myFile').change(function () {
       LoadFile("myFile");//function to do processing of file.
       $('#myFile').val('');// set the value to empty of myfile control.
    });

handleChange({target}) {
    const files = target.files
    target.value = ''
}

입력의 0 번째 인덱스 값을 지우면 나에게 도움이되었습니다 . 아래 코드를 시도해보십시오 (AngularJs).

          scope.onClick = function() {
            input[0].value = "";
                input.click();
            };