이전 블로그에서는 JavaScript에서 파일을 사용하는 방법을 소개했는데, 특히 파일 객체를 얻는 방법에 중점을 두었습니다. 사용자가 파일을 업로드하거나 드래그 앤 드롭하여 업로드하는 경우에만 이러한 개체에 파일의 메타데이터가 포함됩니다. 이러한 파일이 있으면 다음 단계는 해당 파일에서 데이터를 읽는 것입니다.
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(데이터 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 속성에 직접 전달되어 페이지에 표시될 수 있습니다. 또는 이미지를 로드하여 defe0b012bc52bd91899f4872a026947
> /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 유형 [1]은 원래 WebGL의 일부로 도입되었습니다. 어레이버퍼는 제한된 수의 바이트를 나타내며 모든 크기의 숫자를 저장하는 데 사용할 수 있습니다. ArrayBuffer 데이터를 읽는 방법에는 특정 뷰가 필요합니다. 예를 들어 Int8Array는 바이트를 부호 있는 8비트 정수 세트로 처리하는 반면, Float32Array는 바이트를 의 32비트 부동 소수점 숫자 컬렉션으로 처리합니다. . 이를 typeArray[2]라고 하며, 이는 기존 배열과 같이 모든 유형의 데이터를 포함하는 대신 특정 숫자 유형으로 작업하도록 합니다.
바이너리 파일을 처리할 때 ArrayBuffer를 먼저 사용하면 데이터를 더욱 세밀하게 제어할 수 있습니다. ArrayBuffer의 모든 내용을 설명하는 것은 이 블로그의 범위를 벗어납니다. 필요할 때 ArrayBuffer로 파일을 쉽게 읽을 수 있다는 점만 알아두세요. 완전히 지원하는 XMLHttpRequest 레벨 2[3](IE10 및 Opera12를 포함한 대부분의 최신 브라우저에서 지원됨)의 send() 메서드에 ArrayBuffer를 직접 전달할 수 있습니다.
위 내용은 JavaScript 파일 처리 2부 - 파일 읽기를 위한 샘플 코드 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!