>웹 프론트엔드 >JS 튜토리얼 >JS에서 16진수 문자열 형태로 여러 파일 업로드 및 다운로드(코드 예시)

JS에서 16진수 문자열 형태로 여러 파일 업로드 및 다운로드(코드 예시)

不言
不言앞으로
2019-01-26 09:39:322624검색

이 글의 내용은 JS에서 16진수 문자열 형식으로 여러 파일을 업로드하고 다운로드하는 내용입니다. 특정 참고 가치가 있으므로 도움이 필요한 분들에게 도움이 되길 바랍니다. .

저는 현재 DWR 2.0(js에서 Java 메서드를 호출할 수 있는 원격 통신 프레임워크)을 사용하는 오래된 웹 프로젝트를 유지 관리하고 있습니다. 이제 이 프레임워크를 사용하여 서버에 파일을 업로드하고 다운로드해야 합니다. 그러나 이 프로젝트에 사용된 DWR 2.0은 기본 데이터 유형과 String, List, Map과 같은 일반 유형을 매개변수 및 반환 값으로 호출하는 것만 지원합니다. 기본적으로 Java 메소드는 FileTransfer, InputStream, MultipartFile 객체를 사용할 수 없습니다.

문자열을 전달할 수 있으므로 파일과 문자열을 변환하는 방법을 사용하여 앞뒤로 상호 작용하십시오. 프로세스는 다음과 같습니다.
파일을 업로드할 때 file-> ArrayBuffer -> 16진수 문자열 ->[] -> ;
16 기본 문자열 -> blob -> 파일

HTML 코드:

<input type="file" multiple="multiple" onchange="readFilesAndUpload(event)" />
Java 코드:

// 将 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 上传到服务端
            }
        }
    }
}

3. 다운로드 파일

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();
    }
}

JS 코드:

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진수 문자열 형태로 여러 파일 업로드 및 다운로드(코드 예시)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
이 기사는 segmentfault.com에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제