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

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

로서 양식을 가지고 있습니다.

<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
 });

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

<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
});

es6를 사용한 바닐라 js.

document.querySelector('input[name="file"]').addEventListener('change', (e) => {
 const file = e.target.files[0];
  // todo: use file pointer
});

vue 사용자를 위한 솔루션, 동일한 파일을 여러 번 업로드해도 @change 이벤트가 트리거되지 않을 때 문제 해결:

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

파일이 성공적으로 로드된 후 원하는 작업을 수행합니다.파일 처리가 완료된 직후에 파일 제어 값을 빈 string.so 으로 설정합니다. 파일 이름이 변경되거나 변경되지 않더라도 .change()는 항상 호출됩니다.예를 들어 당신은 이것을 할 수 있고 매력적으로 나를 위해 일했습니다.

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

<input id="fusk" type="file" name="upload" style="display: none;"
    onChange=" document.getElementById('myForm').submit();"
>

<input type="file" @change="onFileChange" class="input upload-input" ref="inputFile"/>

onFileChange(e) {
    //upload file and then delete it from input 
    self.$refs.inputFile.value = ''
}

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