파일 선택시 이벤트를 발생시키는 방법

파일 선택시 이벤트를 발생시키는 방법

---

나는 양식을 가지고

<form  onSubmit="return disableForm(this);" action="upload.php" method="post" name="f" id="wizecho" enctype="multipart/form-data">
    <input type="file" name="file" />
    <button onClick="return disableForm(this),ajaxUpload(this.form,'wizecho_upload.php', '&lt;br&gt;Uploading image please wait.....&lt;br&gt;'); return false;">
        Upload Image
    </button>
</form>

이미지를 업로드하는 것입니다.

여기에서 이미지를 업로드하려면 버튼을 클릭해야하며 onClick이벤트 를 사용해야 합니다. 업로드 버튼을 제거하고 입력에서 파일이 선택 되 자마자 이벤트를 시작하고 싶습니다. 어떻게하나요 ??

---

파일 입력에 변경 이벤트를 사용하십시오.

$("#file").change(function(){
         //submit the form here
 });

---

입력 필드에서 onchange 이벤트를 구독 할 수 있습니다.

<input type="file" id="file" name="file" />

그리고:

document.getElementById('file').onchange = function() {
    // fire the upload here
};

---

이것은 수락 답변의 의견에서 위의 @Christopher Thomas의 우려를 해결할 새로운 답변이 필요한 오래된 질문입니다. 페이지를 벗어나지 않고 파일을 두 번째로 선택하는 경우 클릭하거나 터치 스타트 (모바일 용)를 수행 할 때 값을 지워야합니다. 아래는 페이지에서 벗어나 jquery를 사용하는 경우에도 작동합니다.

//the HTML
<input type="file" id="file" name="file" />



//the JavaScript

/*resets the value to address navigating away from the page 
and choosing to upload the same file */ 

$('#file').on('click touchstart' , function(){
    $(this).val('');
});


//Trigger now when you have selected any file 
$("#file").change(function(e) {
    //do whatever you want here
});

---

Do whatever you want to do after the file loads successfully.just after the completion of your file processing set the value of file control to blank string.so the .change() will always be called even the file name changes or not. like for example you can do this thing and worked for me like charm

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

---

Solution for vue users, solving problem when you upload same file multiple times and @change event is not triggering:

 <input
      ref="fileInput"
      type="file"
      @click="onClick"
    />
  methods: {
    onClick() {
       this.$refs.fileInput.value = ''
       // further logic for file...
    }
  }

참고URL : https://stackoverflow.com/questions/5942821/how-to-fire-event-on-file-select