Home > Article > Web Front-end > js uses readAsDataURL to read image file example code

js uses readAsDataURL to read image file example code

零下一度Original: 2017-05-11 13:37:181542browse

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

FileReader The readAsDataURL method of the object can encode the read file into a Data URL. Data URL is a special technology that can embed data (such as pictures) in 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 = "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 = "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 you want to read The file is too large and you want to read it in segments; or you only want to read part of the file. In this case, you can cut the file. Depending on the browser, you can use the following methods:
webkitSlice: applicable to support Webkit engine browsers, 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 the file, and only reads the third byte of the file and reads the sixth byte:

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

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.

【Related recommendations】

1. Free js online video tutorial

2. JavaScript Chinese Reference Manual

3. php.cn Dugu Jiujian (3) - JavaScript video tutorial

The above is the detailed content of js uses readAsDataURL to read image file example code. 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：Detailed explanation of asynchronous exception handling in js and using domian tutorialNext article：Detailed explanation of asynchronous exception handling in js and using domian tutorial

See more

js uses readAsDataURL to read image file example code

Related articles