Uploading and downloading multiple files in the form of hexadecimal strings in JS (code example)

The content of this article is about uploading and downloading multiple files in the form of hexadecimal strings in JS (code examples). It has certain reference value. Friends in need can refer to it. I hope It will help you.

I am currently maintaining an older Web project, which uses DWR 2.0 (a remote communication framework that can call Java methods in js). Now we need to use this framework to upload files to and download files from the server. However, the DWR 2.0 used in this project only supports calling basic data types and common types such as String, List, and Map as parameters and return values ​​by default. Java methods cannot use FileTransfer, InputStream, MultipartFile objects.

Since strings can be passed, use the method of converting files and strings to interact back and forth. The process is as follows:
When uploading a file, file-> ArrayBuffer -> 16 hexadecimal string -> byte[] -> File
When downloading a file, file-> byte[] -> 16 hexadecimal string -> Uint8Array -> blob -> File

2. Upload file

HTML code:

<input type="file" multiple="multiple" onchange="readFilesAndUpload(event)" />

JS code:

// 将 ArrayBuffer 转为 16 进制字符串
function bufToHex(buffer) {
    return Array.prototype.map.call(new Uint8Array(buffer), function (x) {
        return ('00' + x.toString(16)).slice(-2)
    }).join('')
}
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 < len; ++i) {
        var reader = new FileReader()
        reader.index = i
        reader.filename = files[i].name
        reader.readAsArrayBuffer(files[i])    // 将文件读到 ArrayBuffer
        reader.onload = function (e) {
            filenameArr[this.index] = this.filename
            fileContextArr[this.index] = bufToHex(this.result)

            // FileReader 以异步的方式读取文件，需要借助外部变量判断是否读完全部文件
            if (++processed === len) {
                // 将 filenameArr 和 fileContext 上传到服务端
            }
        }
    }
}

Java code:

private static final String UPLOAD_DIR = "D://Files/";

public void uploadFiles(List<String> filenameArr, List<String> fileContextArr) throws IOException {
    byte[] bytes;
    FileOutputStream fos;
    for (int i = 0; i < filenameArr.size(); ++i) {
        String file = fileContextArr.get(i);
        
        // 将 16 进制字符串转换成 byte[]
        bytes = new byte[file.length() / 2];
        for (int j = 0; j < file.length() / 2; ++j) {
            String subStr = file.substring(j * 2, j * 2 + 2);
            bytes[j] = (byte) Integer.parseInt(subStr, 16);
        }

        // 保存到本地磁盘
        fos = new FileOutputStream(UPLOAD_DIR + filenameArr.get(i), true);
        fos.write(bytes);
        fos.close();
    }
}

3. Download file

Java code:

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 < buffer.length; i++) {
        int v = buffer[i] & 0xFF;
        String hv = Integer.toHexString(v);
        if (hv.length() < 2) {
            stringBuilder.append(0);
        }
        stringBuilder.append(hv);
    }
    return stringBuilder.toString();
}

JS code:

// 16 进制字符串转换成整型数组
function hexToBytes(hexStr) {
    var bytes = []
    for (var c = 0; c < hexStr.length; c += 2)
        bytes.push(parseInt(hexStr.substr(c, 2), 16))
    return bytes
}

function downloadFile() {
    // 调用服务端方法，取得 16 进制字符串 res
    var uint8Array = new Uint8Array(hexToBytes(res))
    var blob = new Blob([uint8Array], {type: "application/octet-stream"})

    // 兼容 IE、火狐和谷歌的下载方式
    if (window.navigator && window.navigator.msSaveOrOpenBlob) {
        window.navigator.msSaveOrOpenBlob(blob, filename)
    } else {
        var downloadElement = document.createElement("a")
        var href = window.URL.createObjectURL(blob)
        downloadElement.href = href
        downloadElement.download = filename
        document.body.appendChild(downloadElement)
        downloadElement.click()
        downloadElement.remove()
        window.URL.revokeObjectURL(href)
    }
}

The above is the detailed content of Uploading and downloading multiple files in the form of hexadecimal strings in JS (code example). For more information, please follow other related articles on the PHP Chinese website!