JS read image files using readAsDataURL
readAsDataURL method FileReader object may be encoded into a file read Data URL. Data URL is a special technique, can be data (such as images) embedded in the Web page, not placed in an external file. The benefits of using Data URL is that you do not need extra then issue an HTTP request to the server to obtain additional information; but the disadvantage is that the size of the page may become large. It is suitable for use in embedded small picture, not recommended for large image files will be encoded into the Data URL to use. Your image file can not exceed the limit of the size of the browser, or can not read the image file.
Refer to the following use readAsDataURL read image files 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('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``>`Data readAsDataURL method uses base64 encoded data encoded by the start of the string, followed by followed by MIME type, then add the base64 string content after the comma is encoded image file.
Img use to display an image file
If you want to read out the image file you want displayed directly on the page, you can create a JavaScript through the img tag, and then set the src attribute Data URL, then adding the img tag into the DOM, for example, 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('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``>`Read part of the file
Sometimes you want to read the file is too large, segmented want to read; or just want to read the contents of a file section, then you can cut a file, depending on the browser, you can use the following method:
webkitSlice: applicable to support Webkit browser engine, such as Chrome.
mozSlice: suitable for Firefox.
Byte index of these two methods to be passed in the beginning, and ending byte index, the index begins with 0. The following example program to readAsBinaryString method FileReader object to read the file, the file is read only the third to sixth bytes read bytes:
<!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>note:
Different HTML browsers for 5 different degree of support, the above code is normally performed in Chrome, unlikely to be correctly performed in the other browsers.