Firefox 在选择时触发，而不是在更改时触发答案

【问题标题】：Firefox fires on choose, not on changeFirefox 在选择时触发，而不是在更改时触发
【发布时间】：2015-12-14 13:33:19
【问题描述】：

考虑一下：

<input type="file" id="filePicker">
<script>
    document.getElementById('filePicker').onchange = function() {
        alert('Hi!');
    };
</script>

即使您选择相同的文件并且filePicker 值没有改变，您也会在 Firefox 中看到警告框。有什么解决办法吗？

【问题讨论】：

只保留以前的值并比较 - 如果它与新值相同，请忽略。
只需将文件名记录在一个变量中，然后检查新值是否与旧值相同。如果不是，请运行代码。
@Piskvor：我不知道该怎么做。
@Andy：你介意提供一个例子吗？

标签： javascript html firefox file-upload input

【解决方案1】：

使用临时变量保存文件名，下次选择文件时可以检查：

var filenameTemp = null;
document.getElementById('filePicker').onchange = function(e) {
  var filename = e.target.value;
  if (filename !== filenameTemp) {
    filenameTemp = filename;
    console.log('OK');
    // other code
  } else {
    console.log('Not OK')
  }
};

DEMO

【讨论】：

不错的方法！谢谢！

【解决方案2】：

运行下面的sn-p。它会说“新文件！”当 Chrome 和 Firefox 都有新文件时。

var previousFile = {};

function isSame(oldFile, newFile) {
  return oldFile.lastModified === newFile.lastModified &&
    oldFile.name === newFile.name &&
    oldFile.size === newFile.size &&
    oldFile.type === newFile.type;
} 

document.getElementById('filePicker').onchange = function () {
  var currentFile = this.files[0];
  
  if (isSame(previousFile, currentFile) === false) {
    alert('New File!');
    previousFile = currentFile;
  }
};

&lt;input type="file" id="filePicker"&gt;

【讨论】：