时间戳

首页 > 解决方案 > 使用 onchange 上传 1 个文件两次

javascript - 使用 onchange 上传 1 个文件两次

问题描述

我发现 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。如果我与服务器的连接丢失，我需要这样做。但是我的表单上不能有另一个按钮，除了选择和发送的那个按钮

标签： javascript

解决方案

是的，这很典型，在您第一次选择文件1.jpg后<input>，第二次更改事件不会再次触发，因为输入值没有更改！

重置输入的值就足够了，在处理程序末尾的某处添加： el.value = null

function onChange (event) {
  document.body.append('changed')
  event.target.value = null
}
<input type="file" onchange="onChange(event)" />

推荐阅读