Node.js는 readAsDataURL을 사용하여 이미지 파일 예제 코드를 읽습니다.-JS 튜토리얼-php.cn

Node.js는 readAsDataURL을 사용하여 이미지 파일 예제 코드를 읽습니다.

零下一度

풀어 주다： 2017-05-11 13:37:18

원래의

1553명이 탐색했습니다.

이 기사에서는 readAsDataURL을 사용하여 이미지 파일을 읽는 JavaScript 방법을 주로 소개합니다. 관심 있는 친구는

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

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

<!DOCTYPE html>
<html xmlns = "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 = "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 ="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 지원 수준이 다릅니다. 위 코드는 Chrome에서는 정상적으로 실행되지만, 다른 브라우저에서는 제대로 실행되지 않을 수 있습니다.

[관련 추천]

무료 js 온라인 동영상 튜토리얼

JavaScript 중국어 참조 매뉴얼

php.cn Dugu Jiujian (3) - JavaScript 비디오 튜토리얼

위 내용은 Node.js는 readAsDataURL을 사용하여 이미지 파일 예제 코드를 읽습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!