JS读取U盘的三种方法：File API、Web USB API和第三方库详解

创作时间:

作者:

@小白创作中心

JS读取U盘的三种方法：File API、Web USB API和第三方库详解

引用

来源

https://docs.pingcode.com/baike/2293066

在现代Web开发中，直接读取U盘中的文件是一个常见的需求。本文将详细介绍三种使用JavaScript读取U盘的方法：HTML5的File API、Web USB API和第三方库。每种方法都有其优缺点和适用场景，选择哪种方法取决于具体需求和应用场景。

一、HTML5的File API

HTML5的File API是读取U盘文件最常见的方法。它允许用户通过文件选择对话框选择U盘中的文件，并读取其内容。

1.1 文件选择对话框

首先，需要创建一个文件选择对话框，让用户选择U盘中的文件。可以使用HTML的<input>标签来实现。

<input type="file" id="fileInput" multiple>

1.2 读取文件内容

接下来，需要使用JavaScript来读取用户选择的文件内容。可以使用FileReader对象来实现。

document.getElementById('fileInput').addEventListener('change', function(event) {
    const files = event.target.files;
    for (let i = 0; i < files.length; i++) {
        const file = files[i];
        const reader = new FileReader();
        reader.onload = function(e) {
            console.log(e.target.result);
        };
        reader.readAsText(file); // 可以根据需要选择不同的读取方法，如readAsDataURL, readAsArrayBuffer等
    }
});

1.3 应用场景

这种方法适用于需要用户手动选择文件的场景，如上传文件、读取U盘中的文档或图片等。它的优点是简单易用，缺点是需要用户交互，无法自动读取U盘中的文件。

二、Web USB API

Web USB API是一种较新的API，允许Web应用程序直接与USB设备进行通信。它可以用于读取U盘中的文件，但需要用户授权。

2.1 请求设备权限

首先，需要请求用户授权访问U盘设备。

navigator.usb.requestDevice({ filters: [{ vendorId: 0x1234 }] })
    .then(device => {
        console.log(device);
    })
    .catch(error => {
        console.error(error);
    });

2.2 与设备通信

获得设备权限后，可以使用USB接口与设备进行通信，读取U盘中的文件。

device.open()
    .then(() => device.selectConfiguration(1))
    .then(() => device.claimInterface(0))
    .then(() => device.transferIn(1, 64)) // 读取数据
    .then(result => {
        console.log(result.data);
    })
    .catch(error => {
        console.error(error);
    });

2.3 应用场景

这种方法适用于需要直接与U盘进行通信的场景，如设备管理、调试等。它的优点是可以直接读取U盘中的数据，缺点是需要用户授权，并且浏览器支持有限。

三、第三方库

除了使用原生API，还可以使用一些第三方库来简化读取U盘文件的过程。这些库封装了复杂的底层操作，使得代码更加简洁易用。

3.1 使用FileSaver.js

FileSaver.js是一个用于文件保存的库，可以与File API结合使用，简化文件读取和保存的过程。

<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>

3.2 读取和保存文件

使用FileSaver.js读取和保存文件的示例代码如下：

document.getElementById('fileInput').addEventListener('change', function(event) {
    const files = event.target.files;
    for (let i = 0; i < files.length; i++) {
        const file = files[i];
        const reader = new FileReader();
        reader.onload = function(e) {
            const blob = new Blob([e.target.result], { type: file.type });
            saveAs(blob, file.name);
        };
        reader.readAsArrayBuffer(file); // 读取文件内容
    }
});