Comment: Even if the inline image is encoded into base64, the advantage is that it can reduce http requests, but the disadvantage is that it cannot be cached across domains. Use the readAsDataURL function in the html5 file api. This is a code that converts the file into base64.
Just came into contact with the concept of inlined pictures. Even if the inlined pictures are encoded into base64, looking at the following code, it is an inline problem.It can reduce http requests, but the disadvantage is that it cannot be cached across domains!
<img src="data:image/jpeg;base64,/9j/4QqsRX..." >
Then how to convert pictures into base64 online
If you rely solely on simple javascript, you have permission problems, and you do not allow local file files or folders to operate for security issues
Now that html5 is coming to Baidu, there are a lot of information about Chinese and many other documents for w3c
Now we use the readAsDataURL function in the html5 file api, which is a converting file into base64 encoding.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Simple html5 File test for pic2base64</title>
<style>
</style>
<script>
window.onload = function(){
var input = document.getElementById("demo_input");
var result= document.getElementById("result");
var img_area = document.getElementById("img_area");
if ( typeof(FileReader) === 'undefined' ){
result.innerHTML = "Sorry, your browser does not support FileReader, please use a modern browser to operate!";
input.setAttribute( 'disabled','disabled' );
} else {
input.addEventListener( 'change',readFile,false );}
}
function readFile(){
var file = this.files[0];
// Here we judge the type if it is not a picture, then return it and remove it and upload any file
if(!/image///w+/.test(file.type)){
alert("Please make sure the file is image type");
return false;
}
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function(e){
result.innerHTML = '<img src="'+this.result+'" />';
img_area.innerHTML = '<div>Image img tag display: </div><img src="'+this.result+'" />';
}
}
</script>
</head>
<body>
<input type="file" value="sdgsdg" />
<textarea rows=30 cols=300></textarea>
<p></p>
</body>
</html>