当前位置：首页 > article >正文

JS-本地文件上传

article 2025/1/12 1:46:06

由于不需要原上传文件的样式，所以自己书写了一个按钮触发文件上传，并将原本的样式隐藏

<!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 可以打开的URL
          setTimeout(function() { // 解决window.open blocked due to active file chooser.问题
            window.open(fileURL) 
          }, 100); // 延时时间可以根据需要调整
        }
        this.value=''// 重复上传同一个文件
    });
  </script>
</body>

</html>

查看全文

http://www.kler.cn/a/229834.html