JavaScript 파일 처리 2부 - 파일 읽기를 위한 샘플 코드 공유

이전 블로그에서는 JavaScript에서 파일을 사용하는 방법을 소개했는데, 특히 파일 객체를 얻는 방법에 중점을 두었습니다. 사용자가 파일을 업로드하거나 드래그 앤 드롭하여 업로드하는 경우에만 이러한 개체에 파일의 메타데이터가 포함됩니다. 이러한 파일이 있으면 다음 단계는 해당 파일에서 데이터를 읽는 것입니다.

FileReader 유형

FileReader 유형에는 파일에서 데이터를 읽고 이를 JavaScript 변수 에 저장하는 단일 작업이 있습니다. API는 의도적으로 XMLHttpRequest와 동일하게 설계되었습니다. 둘 다 외부 리소스(브라우저 외부)에서 데이터를 로드하기 때문입니다. 읽기 작업은 비동기식이므로 브라우저가 막히지 않습니다.

FileReader는 파일 데이터를 표현하기 위해 다양한 형식을 생성할 수 있으며, 파일을 읽을 때 반환되는 형식이 필요합니다. 읽기 작업은 다음 메소드 중 하나를 호출하여 완료됩니다.

• readAsText() – 파일 내용을 일반 텍스트로 반환합니다.

• readAsBinaryString() – 암호화된 바이너리 데이터String 형식으로 파일 콘텐츠를 반환합니다(이 메서드는 더 이상 사용되지 않습니다. 대신 readAsArrayBuffer()를 사용하세요)

• readAsArrayBuffer() – 파일 내용을 반환하려면 ArrayBuffer 형식을 사용합니다(이미지 파일과 같은 바이너리 데이터에 유용함)

• readAsDataURL() – 데이터 URL 형식을 사용하여 반환 파일 내용

XHR 객체의 send 메소드가 Http 요청을 시작하는 것처럼 위의 각 메소드는 파일 읽기를 시작합니다. 이때 읽기를 시작하기 전에 load event를 들어야 하며, event.target.result는 항상 읽기 결과를 반환합니다. 예:

var reader = new FileReader();
reader.onload = function(event) {
    var contents = event.target.result;
    console.log("File contents: " + contents);
};

reader.onerror = function(event) {
    console.error("File could not be read! Code " + event.target.error.code);
};

reader.readAsText(file);

이 예에서는 단순히 파일 내용을 읽고 해당 내용을 일반 텍스트로 콘솔에 출력합니다. onload 작업은 파일을 성공적으로 읽었을 때 호출되고, onerror 작업은 어떤 이유로 파일을 읽을 수 없을 때 호출됩니다. FileReader 인스턴스는 이벤트 핸들러의 event.target을 통해 얻을 수 있으며, 리더 변수를 직접 사용하는 것보다 이런 방식으로 사용하는 것이 좋습니다. 결과 속성에는 읽기에 성공했을 때의 파일 내용과 읽기에 실패했을 때의 오류 메시지가 포함됩니다.

데이터 URI 읽기

유사한 방법을 사용하여 파일을 데이터 URI로 읽을 수 있습니다. 예를 들어, 데이터 URI(데이터 URL이라고도 함)는 흥미로운 옵션입니다. 디스크에서 읽은 이미지 파일을 표시하려면 다음 코드를 사용하면 됩니다.

var reader = new FileReader();
reader.onload = function(event) {
    var dataUri = event.target.result,
        img     = document.createElement("img");

    img.src = dataUri;
    document.body.appendChild(img);
};

reader.onerror = function(event) {
    console.error("File could not be read! Code " + event.target.error.code);
};

reader.readAsDataURL(file);

이 코드는 단순히 디스크에서 읽은 이미지 파일을 페이지에 삽입합니다. 이 데이터 URI에는 이미지에 대한 모든 데이터가 포함되어 있으므로 이미지의 src 속성에 직접 전달되어 페이지에 표시될 수 있습니다. 또는 이미지를 로드하여 <<a href="http://www.php.cn/code/7892.html" target="_blank">캔버스<code><<a href="http://www.php.cn/code/7892.html" target="_blank">canvas</a>>> /code>Up:

var reader = new FileReader();
reader.onload = function(event) {
    var dataUri = event.target.result,
        context = document.getElementById("mycanvas").getContext("2d"),
        img     = new Image();

    // wait until the image has been fully processed
    img.onload = function() {
        context.drawImage(img, 100, 100);
    };
    img.src = dataUri;
};

reader.onerror = function(event) {
    console.error("File could not be read! Code " + event.target.error.code);
};

reader.readAsDataURL(file);

이 코드는 이미지 데이터를 새 Image 개체에 로드하고 캔버스에 그립니다(너비와 길이는 모두 100으로 지정됨).

이 경우 일반적으로 데이터 URI가 사용되지만 모든 유형의 파일에 사용할 수 있습니다. 파일을 데이터 URI로 읽는 가장 일반적인 용도는 웹 페이지에 파일 내용을 빠르게 표시하는 것입니다.

ArrayBuffer 읽기

ArrayBuffer 유형 [1]은 원래 WebGL의 일부로 도입되었습니다. 어레이버퍼는 제한된 수의 바이트를 나타내며 모든 크기의 숫자를 저장하는 데 사용할 수 있습니다. ArrayBuffer 데이터를 읽는 방법에는 특정 뷰가 필요합니다. 예를 들어 Int8Array는 바이트를 부호 있는 8비트 정수 세트로 처리하는 반면, Float32Array는 바이트를 의 32비트 부동 소수점 숫자 컬렉션으로 처리합니다. . 이를 typeArray[2]라고 하며, 이는 기존 배열과 같이 모든 유형의 데이터를 포함하는 대신 특정 숫자 유형으로 작업하도록 합니다.

바이너리 파일을 처리할 때 ArrayBuffer를 먼저 사용하면 데이터를 더욱 세밀하게 제어할 수 있습니다. ArrayBuffer의 모든 내용을 설명하는 것은 이 블로그의 범위를 벗어납니다. 필요할 때 ArrayBuffer로 파일을 쉽게 읽을 수 있다는 점만 알아두세요. 완전히 지원하는 XMLHttpRequest 레벨 2[3](IE10 및 Opera12를 포함한 대부분의 최신 브라우저에서 지원됨)의 send() 메서드에 ArrayBuffer를 직접 전달할 수 있습니다.

위 내용은 JavaScript 파일 처리 2부 - 파일 읽기를 위한 샘플 코드 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!