Home > Developer > Web Develop
<! DOCTYPE html>
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title> simple HTML5 readasdataurl img and base64 convert each other </title>
<body>
<input type= "File" value= "id=" File_input "/><br/>
<textarea id= "Result" rows= "ten" cols= "></textarea><br/>"
Enter Base64 code <input id= "Inputbase" type= "text" >
<button id= "showimg" > Show pictures </button><br/>
<script>
Window.onload = function () {
var file_input = document.getElementById ("File_input"),
result = document.getElementById ("result"),
Inputbase=document.getelementbyid ("Inputbase"),
Showimg=document.getelementbyid ("showimg");
function ReadFile () {
var file = this.files[0];
var reader = new FileReader ();
reader.readasdataurl (file);
reader.onload = function (e) {
result.innerhtml= This.result;
}
}
if (typeof (filereader) = = = ' undefined ') {
result.innerhtml = "Sorry, your browser does not support FileReader, please use modern browser operation!" ";
File_input.setattribute (' disabled ', ' disabled ');
}
else {
File_input.addeventlistener (' Change ', ReadFile, false);
}
Showimg.addeventlistener (' click ', function () {
Debugger
Document.queryselector ("img"). Src=inputbase.value;
}, False);
};
</script>
</body>
Simple HTML5 readasdataurl img and base64 convert each other
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
