JS中以16進位字串的形式進行多檔案上傳和下載（程式碼範例）

本篇文章帶給大家的內容是關於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 程式碼：

<input>

JS 程式碼：

// 将 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 <p>Java 程式碼：</p><pre class="brush:php;toolbar:false">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 <p style="white-space: normal;"><strong>3. 下載檔案 </strong></p>
<p>#Java 程式碼： </p>
<pre class="brush:php;toolbar:false">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 <p>JS 程式碼：</p><pre class="brush:php;toolbar:false">// 16 进制字符串转换成整型数组
function hexToBytes(hexStr) {
    var bytes = []
    for (var c = 0; c <p class="comments-box-content"></p>

以上是JS中以16進位字串的形式進行多檔案上傳和下載（程式碼範例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！