Just contact with the concept of an inline picture, inline picture even if the image file encoded into Base64 look at the following code is an inline problem
can reduce the HTTP request, the disadvantage is not cross-domain caching!
Copy Code code as follows:
<img src= "Data:image/jpeg;base64,/9j/4qqsrx ..." alt= "" >
And then online how to turn the picture into Base64
If you rely solely on JavaScript as a permission problem JS does not allow operation of local file files or folders for security issues
Now HTML5 came to Baidu under a lot of information in Chinese and many of the documents to the following http://www.w3.org/TR/FileAPI/
Now we use the Readasdataurl function in the HTML5 file API, which is a code that converts files into base64.
Copy Code code as follows:
<! 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 modern browser operation!" ";
input.setattribute (' disabled ', ' disabled ');
} else {
input.addeventlistener (' Change ', readfile,false);}
}
function ReadFile () {
var file = this.files[0];
//Here we judge the next type if not the picture will be returned to remove any file can be uploaded
if (!/image/w+/.test (File.type)) {
alert ("Make sure the file is an image type");
return false;
}
var reader = new FileReader ();
reader.readasdataurl (file);
reader.onload = function (e) {
result.innerhtml = ' <img src= ' +this.result+ ' alt= '/> ';
img_area.innerhtml = ' <div class= sitetip ' > Image img Tag display: </div><img src= "' +this.result+ '" alt= "" > ';
}
}
</script>
</head>
<body>
<input type= "file" value= "SDGSDG" id= "Demo_input"/>
<textarea id= "result" rows=30 cols=300></textarea>
<p id= "Img_area" ></p>
</body>
</html>
