JavaScript에서 readAsDataURL로 이미지 파일을 읽는 구현 방법 소개
- 黄舟원래의
- 2017-05-14 10:15:373015검색
이 글에서는 이미지 파일을 읽기 위해 readAsDataURL을 사용하는 JavaScript 방법을 주로 소개합니다. 관심 있는 친구들이 참고할 수 있습니다.
파일리더객체는 읽은 파일을 데이터 URL로 인코딩할 수 있습니다. 데이터 URL은 데이터(예: 사진)를 외부 파일에 배치하지 않고 웹 페이지에 삽입할 수 있는 특수 기술입니다. 데이터 URL을 사용하면 추가 데이터를 얻기 위해 서버에 추가 HTTP 요청을 보낼 필요가 없다는 장점이 있습니다. 단점은 웹 페이지의 크기가 더 커질 수 있다는 것입니다. 작은 이미지를 포함하는 애플리케이션에 적합합니다. 큰 이미지 파일을 데이터 URL로 인코딩하여 사용하는 것은 권장되지 않습니다. 이미지 파일은 브라우저의 크기 제한을 초과할 수 없습니다. 그렇지 않으면 이미지 파일을 읽을 수 없습니다.
<!DOCTYPE html>
<html xmlns = "http://www.w3.org/1999/xhtml" >
<head>
<title> </title>
<script type = "text/javascript" >
function ProcessFile( e ) {
var file = document.getElementById('file').files[0];
if (file) {
var reader = new FileReader();
reader.onload = function ( event ) {
var txt = event.target.result;
document.getElementById("result").innerHTML = txt;
};
}
reader.readAsDataURL( file );
}
function contentLoaded () {
document.getElementById('file').addEventListener( 'change' ,
ProcessFile , false );
}
window.addEventListener( "DOMContentLoaded" , contentLoaded , false );
</script>
</head>
<body>
请选取一个图像文件: <input type = "file" id = "file" name = "file" />
<p id = "result"> </p>
</body>
</html> readAsDataURL 메서드는 인코딩에 base-64를 사용합니다. 인코딩된 데이터는 데이터 문자열로 시작됩니다. 그 뒤에 MIME 유형이 오고, base64 문자열을 추가하고, 쉼표 뒤에는 인코딩된 이미지 파일의 내용이 옵니다. Img를 사용하여 이미지 파일 표시
속성은 데이터 URL이고 다음 예와 같이 a1f02c36ba31691bcfe87b2722de723b 태그를 DOM에 추가합니다.
<!DOCTYPE html>
<html xmlns = "http://www.w3.org/1999/xhtml" >
<head>
<title> </title>
<script type = "text/javascript" >
function ProcessFile( e ) {
var file = document.getElementById('file').files[0];
if ( file ) {
var reader = new FileReader();
reader.onload = function ( event ) {
var txt = event.target.result;
var img = document.createElement("img");
img.src = txt;
document.getElementById("result").appendChild( img );
};
}
reader.readAsDataURL( file );
}
function contentLoaded() {
document.getElementById('file').addEventListener( 'change' ,
ProcessFile , false );
}
window.addEventListener( "DOMContentLoaded" , contentLoaded , false );
</script>
</head>
<body>
请选取一个图像文件: <input type = "file" id = "file" name = "file" />
<p id = "result"> </p>
</body>
</html>파일의 일부 읽기
파일의 부분 내용만 읽고 싶은 경우가 있습니다. 브라우저에 따라 다음 방법을 사용할 수 있습니다. webkitSlice:
Chrome와 같은 Webkit 엔진을 지원하는 브라우저에 적합합니다. mozSlice: Firefox용.
이 두 메서드는 시작 바이트
인덱스 와 끝 바이트 인덱스를 0으로 시작해야 합니다. 다음 프로그램 예제에서는 FileReader 개체의 readAsBinaryString 메서드를 사용하여 파일을 읽습니다. 파일의 세 번째 바이트만 읽고 여섯 번째 바이트를 읽습니다.
<!DOCTYPE html>
<html xmlns ="http://www.w3.org/1999/xhtml" >
<head>
<title> </title>
<script type = "text/javascript" >
function ProcessFile( e ) {
var file = document.getElementById( 'file' ).files[0];
if ( file ) {
var reader = new FileReader ();
reader.onload = function ( event ) {
var txt = event.target.result;
document.getElementById( "result" ).innerHTML = txt;
};
}
if ( file.webkitSlice ) {
var blob = file.webkitSlice( 2, 4 );
} else if ( file.mozSlice ) {
var blob = file.mozSlice( 2, 4 );
}
reader.readAsBinaryString( blob );
}
function contentLoaded() {
document.getElementById( 'file' ).addEventListener( 'change' ,
ProcessFile , false );
}
window.addEventListener( "DOMContentLoaded", contentLoaded , false );
</script>
</head>
<body>
<input type = "file" id = "file" name = "file" />
<p id = "result" > </p>
</body>
</html>참고: 다른 브라우저에서는 올바르게 실행되지 않을 수 있습니다.
위 내용은 JavaScript에서 readAsDataURL로 이미지 파일을 읽는 구현 방법 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!