Comments: Inline images can be encoded into base64 to reduce http requests. The disadvantage is that they cannot be cached across domains, use the readAsDataURL function in the html5 file api. This is a concept that converts a file into base64 encoding and just comes into contact with an inline image, inline image even if the image file is encoded as base64, the following code is an inline problem.
Http requests can be reduced, but cross-origin cache is not allowed!
The Code is as follows:
How to convert an image to base64 online
If javascript alone is a permission issue, javascript does not allow operations on local file files or folders for security reasons.
Now html5 to Baidu has a lot of information under the Chinese also many to the w3c document http://www.w3.org/TR/FileAPI/
Now we use the readAsDataURL function in the html5 file api to convert the file to base64 encoding.
The Code is 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 a modern browser! ";
Input. setAttribute ('Disabled ', 'Disabled ');
} Else {
Input. addEventListener ('change', readFile, false );}
}
Function readFile (){
Var file = this. files [0];
// Here, we can determine whether to upload any file if it is not an image.
If (! /Image \/\ w +/. test (file. type )){
Alert ("Please make sure the file is of the image type ");
Return false;
}
Var reader = new FileReader ();
Reader. readAsDataURL (file );
Reader. onload = function (e ){
Result. innerHTML = ' ';
Img_area.innerHTML = '<div class = "sitetip"> image img Label display: </div> ';
}
}
</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>
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
