由于不需要原上传文件的样式，所以自己书写了一个按钮触发文件上传，并将原本的样式隐藏
<!doctype html>
<html><head><meta charset="utf-8"><title>文件传输</title>
</head><body><input type="file" id="fileInput" style="display: none;"/><button id="uploadButton">每日销售收款报表</button><script>document.getElementById('uploadButton').addEventListener('click', function() {document.getElementById('fileInput').click() // 触发文件上传});document.getElementById('fileInput').addEventListener('change', function() {let file = this.files[0] // 获取选中的文件console.log(file)});</script>
</body></html>打印出来的file就是所上传的文件。
浏览上传的文件
出于安全考虑，window.open 不能直接用来打开 <input type="file"> 元素获取的文件。
如果想使用window.open浏览文件可以使用 URL.createObjectURL() 方法创建一个指向文件内容的URL，然后使用 window.open 打开。
let fileURL = URL.createObjectURL(file)
window.open(fileURL)报错
如发现报错：window.open blocked due to active file chooser.
原因：浏览器通常会在有文件上传的情况下阻止弹出新窗口，以防止用户在不经意间更改文件或者导致页面不稳定。
解决：可以使用一个定时器（setTimeout）来延迟window.open()的调用
setTimeout(function() { window.open(fileURL)
}, 100); // 延时时间可以根据需要调整乱码
如果浏览txt文件是浏览器直接打开浏览；其他文件则是下载浏览
打开txt文件时会有跨域的问题，从而导致乱码，有一个解决方案是上传的txt文件为带有 BOM 的 UTF-8编码格式
多次上传
如果想多次上传同一个文件，因为两次上传的文件重复了，不会触发change事件，所以需要在每次上传结束后，把<input type="file"/>的value设置为空
总结
最后总结代码为：
<!doctype html>
<html><head><meta charset="utf-8"><title>文件传输</title>
</head><body><input type="file" id="fileInput" style="display: none;"/><button id="uploadButton">每日销售收款报表</button><script>document.getElementById('uploadButton').addEventListener('click', function() {document.getElementById('fileInput').click() // 触发文件上传});document.getElementById('fileInput').addEventListener('change', function() {let file = this.files[0] // 获取选中的文件if (file) {let fileURL = URL.createObjectURL(file) //转换成 window.open 可以打开的URLsetTimeout(function() { // 解决window.open blocked due to active file chooser.问题window.open(fileURL) }, 100); // 延时时间可以根据需要调整}this.value=''// 重复上传同一个文件});</script>
</body></html>
