本篇文章帶給大家的內容是關於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 type="file" multiple="multiple" onchange="readFilesAndUpload(event)" />
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 < 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 程式碼：
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. 下載檔案
#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 < 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 进制字符串转换成整型数组
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)
}
}以上是JS中以16進位字串的形式進行多檔案上傳和下載（程式碼範例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
