Як запустити подію на файлі виберіть

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

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

ванільний js за допомогою es6

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