本篇文章给大家带来的内容是关于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 代码：
登录后复制
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 filenameArr, List 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进制字符串的形式进行多文件上传和下载（代码示例）的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2733709.html
