Hochladen und Herunterladen mehrerer Dateien in Form von Hexadezimalzeichenfolgen in JS (Codebeispiel)

Der Inhalt dieses Artikels befasst sich mit dem Hochladen und Herunterladen mehrerer Dateien in Form von Hexadezimalzeichenfolgen in JS (Codebeispiele). Ich hoffe, es wird Ihnen helfen.

Ich pflege derzeit ein älteres Webprojekt, das DWR 2.0 verwendet (ein Remote-Kommunikationsframework, das Java-Methoden in js aufrufen kann). Jetzt müssen wir dieses Framework verwenden, um Dateien auf den Server hochzuladen und von diesem herunterzuladen. Der in diesem Projekt verwendete DWR 2.0 unterstützt jedoch nur den Aufruf grundlegender Datentypen und allgemeiner Typen wie String, List und Map als Parameter und Rückgabewerte Standardmäßig können Java-Methoden keine FileTransfer-, InputStream- und MultipartFile-Objekte verwenden.

Da Zeichenfolgen übergeben werden können, verwenden Sie die Methode zum Konvertieren von Dateien und Zeichenfolgen, um hin und her zu interagieren. Der Vorgang ist wie folgt:
Beim Hochladen einer Datei-> ArrayBuffer -> -> byte[] -> Hexadezimale Zeichenfolge -> Blob -> >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. Datei herunterladen

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)
    }
}

Das obige ist der detaillierte Inhalt vonHochladen und Herunterladen mehrerer Dateien in Form von Hexadezimalzeichenfolgen in JS (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!