как запустить событие при выборе файла

У меня форма как

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

Делайте все, что вы хотите сделать после успешной загрузки файла. Просто после завершения обработки файла установите значение элемента управления файлом на пустую строку. Поэтому .change () всегда будет вызываться, даже если имя файла изменится или нет. например, вы можете делать это и работали для меня как шарм

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

Решение для пользователей vue, решение проблемы, когда вы загружаете один и тот же файл несколько раз и событие @change не запускается:

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

<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 = ''
}

vanilla js с использованием es6

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