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

У меня есть форма

<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. Я хочу удалить кнопку загрузки, и как только файл будет выбран на входе, я хочу запустить событие. Как это сделать?

Ответ 1

Используйте событие изменения на входе файла.

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

Ответ 2

Вы можете подписаться на событие onchange в поле ввода:

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

а затем:

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

Ответ 3

Это более старый вопрос, требующий более нового ответа, который будет касаться проблемы @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
});

Ответ 4

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

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

Ответ 5

Есть ли у нас версия CSS, такая как input [type = "file"]: выбрана или так?

Ответ 6

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

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