日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

這篇文章將為大家詳細(xì)講解有關(guān)JS中以16進(jìn)制字符串形式進(jìn)行多文件上傳和下載的案例分析，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

驛城ssl適用于網(wǎng)站、小程序/APP、API接口等需要進(jìn)行數(shù)據(jù)傳輸應(yīng)用場(chǎng)景，ssl證書未來(lái)市場(chǎng)廣闊！成為創(chuàng)新互聯(lián)公司的ssl證書銷售渠道，可以享受市場(chǎng)價(jià)格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：18982081108（備注：SSL證書合作）期待與您的合作！

最近在維護(hù)一個(gè)比較老的 Web 項(xiàng)目，其中用到了 DWR 2.0 （一種可以在 js 里調(diào)用 Java 方法的遠(yuǎn)程通信框架）。現(xiàn)在要利用這個(gè)框架實(shí)現(xiàn)上傳文件到服務(wù)端和從服務(wù)端下載文件，然而這個(gè)項(xiàng)目用的 DWR 2.0，默認(rèn)只支持調(diào)用以基本數(shù)據(jù)類型，以及String、 List、Map 等常用類型作為參數(shù)和返回值的 Java 方法，無(wú)法使用 FileTransfer、InputStream、MultipartFile 這些對(duì)象。

既然可以傳遞字符串，那就采用文件與字符串互轉(zhuǎn)的方式進(jìn)行前后交互。流程如下：
上傳文件時(shí)，文件 -> ArrayBuffer ->16 進(jìn)制字符串-> byte[] -> 文件  
下載文件時(shí)，文件 -> byte[] ->16 進(jìn)制字符串-> Uint8Array -> blob -> 文件

2. 上傳文件

HTML 代碼：

JS 代碼：

// 將 ArrayBuffer 轉(zhuǎn)為 16 進(jìn)制字符串
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)    // 文件內(nèi)容
    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 上傳到服務(wù)端
            }
        }
    }
}

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 < filenameArr.size(); ++i) {
        String file = fileContextArr.get(i);
        
        // 將 16 進(jìn)制字符串轉(zhuǎn)換成 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. 下載文件

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[] 轉(zhuǎn)換成 16 進(jìn)制字符串
    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 代碼：

// 16 進(jìn)制字符串轉(zhuǎn)換成整型數(shù)組
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() {
    // 調(diào)用服務(wù)端方法，取得 16 進(jìn)制字符串 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)
    }
}

關(guān)于JS中以16進(jìn)制字符串形式進(jìn)行多文件上傳和下載的案例分析就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到。

網(wǎng)頁(yè)名稱：JS中以16進(jìn)制字符串形式進(jìn)行多文件上傳和下載的案例分析-創(chuàng)新互聯(lián)
瀏覽路徑：http://www.dlmjj.cn/article/ccpgoi.html