Question

考虑一下：

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

即使您选择了相同的文件且filePicker值没有变化，您也会在Firefox中看到警告框。任何解决方案？

Answer 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

Answer 2

运行下面的代码段。它会说＆＃34;新文件！＆＃34;当Chrome和Firefox都有新文件时。

＆＃13;

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;
  }
};

＆＃13;

<input type="file" id="filePicker">

＆＃13;

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

2 个答案: