JavaScript 는 readAsDataURL 을 사용 하여 이미지 파일 을 읽 습 니 다.

FileReader 대상 의 readAsDataURL 방법 은 읽 은 파일 을 Data URL 로 인 코딩 할 수 있 습 니 다.Data URL 은 외부 파일 에 넣 지 않 고 자료(예 를 들 어 그림)를 웹 페이지 에 삽입 할 수 있 는 특수 한 기술 입 니 다.Data URL 을 사용 하 는 장점 은 서버 에 추가 로 HTTP 요청 을 하지 않 아 도 된다 는 것 입 니 다.단점 은 웹 페이지 의 크기 가 커 질 수 있다 는 것 이다.작은 그림 을 삽입 하 는 데 적합 합 니 다.큰 그림 파일 을 Data 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('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" />
  <div id = "result"> </div>
</body>
</html>

readAsDataURL 방법 은 base-64 를 사용 하여 인 코딩 을 합 니 다.인 코딩 된 자 료 는 data 문자열 로 시작 하고 뒤에 MIME type 을 따 른 다음 에 base 64 문자열 을 추가 합 니 다.쉼표 다음 에 인 코딩 된 이미지 파일 의 내용 입 니 다.
그림 파일 을 Img 으로 표시 하기
읽 은 그림 파일 을 웹 페이지 에 직접 표시 하려 면 자바 스 크 립 트 를 통 해탭 을 만 들 고 src 속성 을 Data 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('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" />
<div id = "result"> </div>
</body>
</html>

부분 파일 읽 기
읽 고 싶 은 파일 이 너무 커서 세그먼트 로 읽 으 려 고 할 때 가 있 습 니 다.또는 파일 부분의 내용 만 읽 으 려 면 파일 을 자 를 수 있 습 니 다.브 라 우 저 에 따라 다음 과 같은 방법 을 사용 할 수 있 습 니 다.
웹 키 트 Slice:Chrome 과 같은 웹 키 트 엔진 을 지원 하 는 브 라 우 저 에 적 용 됩 니 다.
mozSlice:Firefox 에 적 용 됩 니 다.
이 두 가지 방법 은 시작 하 는 비트 인덱스 와 끝 에 있 는 비트 인덱스,인덱스 를 0 으로 시작 합 니 다.다음 프로그램의 범례 는 FileReader 대상 의 readAsBinary String 방법 으로 파일 을 읽 습 니 다.파일 의 세 번 째 원본 만 읽 고 여섯 번 째 원본 만 읽 습 니 다.


<!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" />
<div id = "result" > </div>
</body>
</html>

주의:
서로 다른 브 라 우 저 는 HTML 5 에 대한 지원 정도 가 다 릅 니 다.상기 프로그램 코드 는 chrome 에서 정상적으로 실 행 될 수 있 습 니 다.다른 브 라 우 저 에서 정확하게 실 행 될 수 있 는 것 은 아 닙 니 다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

Android 에서 sdcard 의 그림 인 스 턴 스 읽 기(필수)

Android 가 sdcard 의 그림 을 읽 는 것 은 매우 간단 한 일 입 니 다.다음은 이 문 제 를 예 로 들 어 설명 하 겠 습 니 다. 다음 에 해 야 할 일 은 이 그림 을 app 에 읽 어서 표시 하 ...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

JavaScript 는 readAsDataURL 을 사용 하여 이미지 파일 을 읽 습 니 다.

좋은 웹페이지 즐겨찾기