JavaScript에서 readAsDataURL로 이미지 파일을 읽는 구현 방법 소개-JS 튜토리얼-php.cn

JavaScript에서 readAsDataURL로 이미지 파일을 읽는 구현 방법 소개

黄舟

풀어 주다： 2017-05-14 10:15:37

원래의

3037명이 탐색했습니다.

이 글에서는 이미지 파일을 읽기 위해 readAsDataURL을 사용하는 JavaScript 방법을 주로 소개합니다. 관심 있는 친구들이 참고할 수 있습니다.

파일리더객체는 읽은 파일을 데이터 URL로 인코딩할 수 있습니다. 데이터 URL은 데이터(예: 사진)를 외부 파일에 배치하지 않고 웹 페이지에 삽입할 수 있는 특수 기술입니다. 데이터 URL을 사용하면 추가 데이터를 얻기 위해 서버에 추가 HTTP 요청을 보낼 필요가 없다는 장점이 있습니다. 단점은 웹 페이지의 크기가 더 커질 수 있다는 것입니다. 작은 이미지를 포함하는 애플리케이션에 적합합니다. 큰 이미지 파일을 데이터 URL로 인코딩하여 사용하는 것은 권장되지 않습니다. 이미지 파일은 브라우저의 크기 제한을 초과할 수 없습니다. 그렇지 않으면 이미지 파일을 읽을 수 없습니다.

readAsDataURL을 사용하여 이미지 파일을 읽는 다음 예를 참조하세요.

<!DOCTYPE html>
<html xmlns = "http://www.w3.org/1999/xhtml" >
<head>
  <title> </title>
  <script type = "text/javascript" >
    function ProcessFile( e ) { 
      var file = document.getElementById(&#39;file&#39;).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(&#39;file&#39;).addEventListener( &#39;change&#39; ,
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를 사용하여 이미지 파일 표시

읽은 이미지 파일을 웹페이지에 직접 표시하려면 JavaScript를 통해 태그를 생성한 후 src를 설정하면 됩니다.

속성은 데이터 URL이고 다음 예와 같이 태그를 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(&#39;file&#39;).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(&#39;file&#39;).addEventListener( &#39;change&#39; ,
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( &#39;file&#39; ).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( &#39;file&#39; ).addEventListener( &#39;change&#39; ,
ProcessFile , false );
}
window.addEventListener( "DOMContentLoaded", contentLoaded , false );
</script>
</head>
<body>
<input type = "file" id = "file" name = "file" />
<p id = "result" > </p>
</body>
</html>

로그인 후 복사

참고:

브라우저마다 HTML 5 지원 수준이 다릅니다. 위 코드는 크롬에서는 정상적으로 실행될 수 있지만

다른 브라우저에서는 올바르게 실행되지 않을 수 있습니다.

위 내용은 JavaScript에서 readAsDataURL로 이미지 파일을 읽는 구현 방법 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!