통신 Javascript 를 사용하여 Binary File 읽기

황제낙엽 2010.09.29 12:53 조회 수 : 3378 추천:55

nagoon97님의 Reading binary files using Ajax 포스트에서는 Ajax를 이용하여 바이너리 파일에 접근하는 방법을 소개하고 있습니다. 

  1. function BinFileReader(fileURL) {...} 을 호출합니다.
  2. 내부 변수들을 초기화 작업을 수행합니다.
  3. Browser의 userAgent를 체크하여서 IE인 경우에는 BinFileReaderImpl_IE를 호출하고 그 외의 경우에는 BinFileReaderImpl을 호출합니다.
  4. function BinFileReaderImpl(fileURL) {...} 에서는
    1. XMLHttpRequest를 생성한 다음에 mime type을 'text/plain; charset=x-user-defined' 설정한 다음에 file을 요청합니다.
      req.overrideMimeType('text/plain; charset=x-user-defined');

    2. 성공적으로 로딩한 다음에는 fileContents에 responseText를 저장하고
    3. fileSize를 responseText.length를 저장합니다.
    4. 이 때 readByteAt(index) 메소드를 생성하는데 charCodeAt(index) & 0xff 값을 리턴합니다.

  5. function BinFileReaderImpl_IE(fileURL) {...}에서는 (VB코드로 구현)
    1. VB 코드를 사용하여 XMLHttp Request를 생성한 다음에
    2. 헤더에 "Accept-Charset", "x-user-defined"로 설정한 후 file을 요청합니다.
    3. file 로딩이 완료된 다음에는 responseBody를 통하여 byteArray를 얻어옵니다.
    4. 이 byteArray를 Array()로 변환한 다음에 fileSize를 생성 및 readByteAt()를 생성합니다.
내부에는 filePointer (private)변수를 가지고 있어서 readString()을 호출하여 읽어들이는 경우 해당하는 읽어들이는 위치로 파일 포인터(위에서 얻어온 Array 또는 String에 접근하기 위한 index)를 변경 시킨 다음에 읽어들이게 됩니다.

제공되는 API는 다음과 같습니다.
  1. getFileSize() : 파일크기를 리턴
  2. getFilePointer() : 파일을 읽어들일 위치를 지정하는 내부 포인터의 값
  3. movePointerTo(iTo) : 포인터 위치 이동 (0 이상 fileSize 아래의 값으로 제한을 주는 것 외에는 값만 변경)
  4. movePointer(iDirection) : 읽어들이는 방향의 변경
  5. 그 외에 readNumber, readString, readUnicodeString을 사용하여 파일을 읽기 위해서 사용되는 메소드 제공
제공되는 예제에 BMP 파일의 헤더를 직접 읽어들여서 width/height/bits per pixel 값과 fileSize를 읽어들이는 것을 보실 수도 있습니다.
번호 제목 글쓴이 날짜 조회 수
246 [Gemini] ajax 와 fetch 의 차이 황제낙엽 2025.01.04 3419
245 [검토 완료] 디바이스 카메라로 촬영한 사진을 서버에 업로드하기 샘플 황제낙엽 2024.11.21 3987
244 브라우저에서 이미지를 편집(crop 등) 할 수 있는 오픈소스 Cropper.js 황제낙엽 2024.11.16 3842
243 [ChatGPT] json data 의 정렬 [1] 황제낙엽 2024.07.23 3352
242 DOMContentLoaded 이벤트와 window.onload 이벤트 황제낙엽 2024.07.15 3669
241 fetch() 사용 예제들 황제낙엽 2024.07.09 3380
240 [Copilot] Vanilla JavaScript에서 외부 스크립트 파일에 정의된 함수들을 로드 황제낙엽 2024.06.21 3758
239 [Copilot] ES6 모듈(module) 문법 황제낙엽 2024.06.21 3805
238 [Copilot] JSON 객체 내부 데이터를 순회하면서 조회하는 코드 황제낙엽 2024.06.02 3270
237 [Copilot] JavaScript로 서버에 특정 값을 POST 방식으로 전달하고 응답을 기다리지 않고 바로 종료 황제낙엽 2024.05.31 3615
236 json 데이터 내의 변수명에 prefix 로 type 표현하기 황제낙엽 2024.04.15 3361
235 fetch() 함수 사용 예제 file 황제낙엽 2023.11.23 3605
234 현재 document 의 host 와 port 를 얻는 방법 황제낙엽 2023.10.03 4209
233 (Bard) FileReader 로 여러개의 파일을 read 하는 법 file 황제낙엽 2023.08.23 3660
232 How to build a file upload service with vanilla JavaScript file 황제낙엽 2023.08.22 3715
231 (Bard) JavaScript로 JSON 배열을 작성하는 방법 황제낙엽 2023.08.21 3672
230 모바일 브라우저에서 file input element 를 이용하여 여러장의 이미지를 서버에 전송하려 할때 [1] 황제낙엽 2023.08.21 3703
229 navigator.mediaDevices 황제낙엽 2023.08.21 3798
228 Barcode Detection API 황제낙엽 2023.08.06 3854
227 정규식을 이용한 이메일 검증 스크립트 file 황제낙엽 2023.06.25 2894