Загрузить 1 файл с onchange дважды

Question

Я нашел 1, но в моем приложении.

Мне нужно отправить файл на сервер со своей страницы, но я могу сделать это дважды с одним и тем же файлом.

У меня есть код вроде

<div>
  <input type="file" accept=".jpg" id="input" style="display:none" onchange="uploadImage(this)"/>
  <button type="button" id="btn" onclick="bind()">Click here</button> 
</div>

<script>

function bind(){
  document.getElementById('input').click();
}

function uploadImage(el){

  var curFiles = el.files;

  if(curFiles.length != 0) {

    var file = curFiles[0];
    var fileReader = new FileReader();

    fileReader.onload = function (loadedFile) {
      sentToServer(loadedFile);
    }
   fileReader.readAsArrayBuffer(file);
  }
</script>

Итак, когда я нажимаю кнопку и выбираю 1 файл, например 1.jpg, он загружается. Если я снова выберу его, он не будет загружаться снова. Но если я выберу 2.jpg, новое изображение будет загружено и отправлено на сервер.

Итак, что мне делать, чтобы можно было загрузить в любое время мой 1.jpg. Мне нужно это сделать, если мое соединение с сервером потеряно. Но у меня не может быть другой кнопки в моей форме, кроме той, которая выбирает и отправляет

Answer 1

Да, это довольно типично, после того как вы выберете в первый раз файл 1.jpg в <input>, затем во второй раз событие изменения не запускается снова, потому что входное значение не изменилось!

Достаточно сбросить значение ввода, добавить где-нибудь в конце вашего обработчика: el.value = null

function onChange (event) {
  document.body.append('changed')
  event.target.value = null
}

<input type="file" onchange="onChange(event)" />