JS中以16进制字符串的形式进行多文件上传和下载（代码示例）

最近在维护一个比较老的 Web 项目，其中用到了 DWR 2.0 （一种可以在 js 里调用 Java 方法的远程通信框架）。现在要利用这个框架实现上传文件到服务端和从服务端下载文件，然而这个项目用的 DWR 2.0，默认只支持调用以基本数据类型，以及String、 List、Map 等常用类型作为参数和返回值的 Java 方法，无法使用 FileTransfer、InputStream、MultipartFile 这些对象。

既然可以传递字符串，那就采用文件与字符串互转的方式进行前后交互。流程如下：
上传文件时，文件 -> ArrayBuffer -> 16 进制字符串 -> byte[] -> 文件
下载文件时，文件 -> byte[] -> 16 进制字符串 -> Uint8Array -> blob -> 文件

2. 上传文件

HTML 代码：

JS 代码：

// 将 ArrayBuffer 转为 16 进制字符串
function bufToHex(buffer) {
    return Array.prototype.map.call(new Uint8Array(buffer), function (x) {
        return (&＃39;00&＃39; + x.toString(16)).slice(-2)
    }).join(&＃39;&＃39;)
}
function readFilesAndUpload(event) {
    var processed = 0
    var files = event.target.files
    var len = files.length
    var filenameArr = new Array(len)    // 文件名
    var fileCOntextArr= new Array(len)    // 文件内容
    for (var i = 0; i 
Java 代码：
private static final String UPLOAD_DIR = "D://Files/";

public void uploadFiles(List filenameArr, List fileContextArr) throws IOException {
    byte[] bytes;
    FileOutputStream fos;
    for (int i = 0; i 
3. 下载文件
Java 代码：
public String downloadFile(String filename) throws IOException {
    File file = new File(UPLOAD_DIR + filename);
    if (!file.exists()) {
        return null;
    }
    
    // 将文件读到 byte[]
    byte[] buffer = new byte[(int) file.length()];
    InputStream is = new FileInputStream(file);
    is.read(buffer);
    is.close();

    // 将 byte[] 转换成 16 进制字符串
    StringBuilder stringBuilder = new StringBuilder();
    for (int i = 0; i 
JS 代码：
// 16 进制字符串转换成整型数组
function hexToBytes(hexStr) {
    var bytes = []
    for (var c = 0; c 
以上就是JS中以16进制字符串的形式进行多文件上传和下载（代码示例）的详细内容，更多请关注 第一PHP社区 其它相关文章！