<input type="file" id="excel-file" onchange="readExcel(this)" style="margin-left:9px">这个的onchange事件为什么不能传相同名称但内容不同的文件,因为浏览器缓存的问题,例如在每次选择文件时都更改input元素的value属性,或者使用一个隐藏的input元素来实现文件选择操作具体例子
时间: 2023-07-06 18:38:24 浏览: 92
当用户选择一个文件时,浏览器会缓存该文件,以便在用户重新选择相同文件时能够快速加载。因此,如果用户选择一个不同的文件但文件名相同,浏览器会认为该文件已经缓存,并不会重新加载该文件。这就是为什么在onchange事件中选择相同名称但内容不同的文件时,不会触发该事件的原因。
为了解决这个问题,可以在每次选择文件时都更改input元素的value属性,例如:
```
document.getElementById('excel-file').value = '';
```
这会清除缓存,使浏览器重新加载新文件。
另外,也可以使用一个隐藏的input元素来实现文件选择操作,例如:
```
<input type="file" id="excel-file" style="display:none">
<button onclick="document.getElementById('excel-file').click()">选择文件</button>
```
这样用户点击按钮时会触发选择文件操作,每次选择文件时都会重新渲染input元素,从而避免了缓存问题。
相关问题
<input type="file" id="excel-file" onchange="readExcel(this)" style="margin-left:9px">这个的onchange事件不能传相同名称但内容不同的文件怎么办
如果你需要选择相同名称但内容不同的文件并触发 `onchange` 事件,你可以通过一些技巧来实现。例如,你可以给每个文件选择器一个唯一的 ID,并在每次选择文件时修改 ID,这样即使选择的是相同名称但内容不同的文件,浏览器也会认为它们是不同的文件,从而触发 `onchange` 事件。以下是一个示例代码:
```html
<input type="file" id="excel-file-1" onchange="readExcel(this)" style="margin-left:9px">
<input type="file" id="excel-file-2" onchange="readExcel(this)" style="margin-left:9px">
<script>
let idCounter = 1;
function readExcel(input) {
// 处理文件
// ...
// 修改 ID
input.id = "excel-file-" + (++idCounter);
}
</script>
```
在这个示例中,每次选择文件时,`readExcel` 函数会处理文件并将输入框的 ID 修改为一个新的唯一值,这样即使选择的是相同名称但内容不同的文件,浏览器也会认为它们是不同的文件,并触发 `onchange` 事件。
<input type="file" id="excel-file" onchange="readExcel(this)" style="margin-left:9px">怎么比较文件的哈希值是否相同
可以使用JavaScript中的`FileReader`和`CryptoJS`库来计算文件的哈希值,并进行比较。具体步骤如下:
1. 在HTML中添加一个用于选择文件的`<input>`元素,设置`onchange`事件为`readExcel(this)`。
```html
<input type="file" id="excel-file" onchange="readExcel(this)" style="margin-left:9px">
```
2. 在JavaScript中定义`readExcel`函数,读取选择的文件并计算其哈希值。
```javascript
function readExcel(input) {
if (input.files && input.files[0]) {
const reader = new FileReader();
reader.onload = function(event) {
const fileContent = event.target.result;
// 计算文件哈希值
const hash = CryptoJS.SHA256(fileContent).toString();
// 比较哈希值是否相同
if (hash === lastFileHash) {
// 文件未发生变化
// ...
} else {
// 文件已发生变化
// ...
// 更新上一次文件的哈希值
lastFileHash = hash;
}
};
reader.readAsBinaryString(input.files[0]);
}
}
```
3. 在JavaScript中定义`lastFileHash`变量,用于记录上一次选择文件的哈希值。可以将其初始化为一个空字符串。
```javascript
let lastFileHash = "";
```
需要注意的是,由于使用了`readAsBinaryString`方法读取文件内容,因此需要在HTML文件中引入`CryptoJS`库,并在JavaScript文件中引入`core.js`和`sha256.js`模块。
```html
<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.0.0/core.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.0.0/sha256.js"></script>
```