Home >Web Front-end >JS Tutorial >Introduction to the implementation method of reading image files by readAsDataURL in JavaScript

Introduction to the implementation method of reading image files by readAsDataURL in JavaScript

黄舟Original: 2017-05-14 10:15:373044browse

This article mainly introduces in detail the JavaScript method of using readAsDataURL to read image files. It has certain reference value. Interested friends can refer to it

FileReaderThe readAsDataURL method of object can encode the read file into a Data URL. Data URL is a special technology that can embed data (such as picture) into a web page without placing it in an external file. The advantage of using Data URL is that you do not need to issue an additional HTTP request to the server to obtain additional data; the disadvantage is that the size of the web page may become larger. It is suitable for applications that embed small images. It is not recommended to encode large image files into Data URLs for use. Your image file cannot exceed the size limit of the browser, otherwise the image file cannot be read.

Refer to the following example of using readAsDataURL to read an image file:

<!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>

The readAsDataURL method will use base-64 for encoding. The encoded data starts with the data string, followed by MIME type, then add the base64 string, and after the comma is the content of the encoded image file.
Use Img to display image files

If you want to display the read image file directly on the web page, you can create an a1f02c36ba31691bcfe87b2722de723b tag through JavaScript, and then set The src attribute is the Data URL, and then add the a1f02c36ba31691bcfe87b2722de723b tag to the DOM, as shown in the following example:

<!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>

Read part of the file

Sometimes the file you want to read is too large and you want to read it in segments; or you only want to read the part of the file. In this case, you can cut the file. Depending on the browser, you can Use the following method: webkitSlice: suitable for browsers that support Webkit engine, such as
Chrome. mozSlice: Works with Firefox.
These two methods need to pass in the starting byte
index, and the ending byte index. The index starts with 0. The following program example uses the readAsBinaryString method of the FileReader object to read a file. It only reads the third byte of the file and reads the sixth byte:

<!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>

Please Note:

Different browsers have different levels of support for HTML 5. The above code can be executed normally in chrome, but may not be executed correctly in

other browsers.

The above is the detailed content of Introduction to the implementation method of reading image files by readAsDataURL in JavaScript. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Code sharing on how JavaScript uses ZeroClipboard to operate the clipboardNext article：Code sharing on how JavaScript uses ZeroClipboard to operate the clipboard

See more

Introduction to the implementation method of reading image files by readAsDataURL in JavaScript

Related articles