ホームページ > 記事 > ウェブフロントエンド > JS の 16 進文字列形式で複数のファイルをアップロードおよびダウンロードする (コード例)
この記事の内容は、JS での 16 進数の文字列形式での複数のファイルのアップロードとダウンロードに関するものです (コード例)。必要な方は参考にしていただければ幸いです。
私は現在、DWR 2.0 (js で Java メソッドを呼び出すことができるリモート通信フレームワーク) を使用する古い Web プロジェクトを保守しています。ここで、このフレームワークを使用してサーバーにファイルをアップロードしたり、サーバーからファイルをダウンロードしたりする必要があります。ただし、このプロジェクトで使用されている DWR 2.0 は、基本的なデータ型と、String、List、Map などの一般的な型のパラメーターおよび戻り値としての呼び出しのみをサポートしています。デフォルトでは、Java メソッドは FileTransfer、InputStream、MultipartFile オブジェクトを使用できません。
文字列を渡すことができるため、ファイルと文字列を相互に変換する方法を使用します。プロセスは次のとおりです。
ファイルをアップロードする場合、 file->ArrayBuffer -> 16 16 進数の文字列 -> ファイルをダウンロードする場合、ファイル-> byte[] ->
16 16 進文字列 -> blob -> ファイル
<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 ファイルをダウンロードします。 :
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 中国語 Web サイトの他の関連記事を参照してください。