<input type="file" id="excel-file" onchange="readExcel(this)" style="margin-left:9px">这个的onchange事件为什么不能传相同名称但内容不同的文件,因为浏览器缓存的问题,例如在每次选择文件时都更改input元素的value属性具体例子
时间: 2023-07-06 13:38:34 浏览: 27
这是因为浏览器会缓存上一次所选文件的信息,所以如果选择了相同名称但内容不同的文件,浏览器会认为这是同一个文件,不会触发onchange事件。为了解决这个问题,可以在每次选择文件时先将input元素的value属性置为空,然后再设置新的文件名。具体的代码如下:
```html
<input type="file" id="excel-file" onchange="readExcel(this)" style="margin-left:9px">
<script>
function readExcel(input) {
// 清空input元素的value属性
input.value = '';
// 设置新的文件名
input.value = 'new_file.xlsx';
// 其他处理逻辑
}
</script>
```
这样就可以解决浏览器缓存的问题,实现每次都能正确触发onchange事件。
相关问题
<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>
```