<input type="file" id="excel-file" onchange="readExcel(this)" style="margin-left:9px">这个的onchange事件不能传相同名称但内容不同的文件会不触发该事件,因为浏览器缓存的问题,例如在每次选择文件时都更改input元素的value属性具体例子
时间: 2023-07-06 13:38:34 浏览: 49
没问题,以下是一个具体例子:
```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';
// 处理文件内容
var file = input.files[0];
var reader = new FileReader();
reader.onload = function(e) {
var contents = e.target.result;
console.log(contents);
};
reader.readAsText(file);
}
</script>
```
在每次选择文件时,先将input元素的value属性置为空,然后再设置新的文件名,这样即使选择了相同名称但内容不同的文件,也能正确触发onchange事件,从而实现文件内容的处理。在这个例子中,使用了FileReader来读取文件内容,这是一种常用的方法。
相关问题
<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>
```
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![java](https://img-home.csdnimg.cn/images/20210720083646.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)