I have just come across the concept of inline images. Even if the image file is encoded into base64 for inline images, look at the code below to see the inline problem.
It can reduce http requests, but the disadvantage is that it cannot be cached across domains!
Then how to convert pictures to base64 online
If you only rely on simple javascript, there is js with permission issues does not allow operations on local files or folders for security reasons
Now that HTML5 is here, there is a lot of information on Baidu, including Chinese and w3c documents http://www. w3.org/TR/FileAPI/
Now we use the readAsDataURL function in the file api of html5. This is a function that converts the file into base64 encoding
Simple html5 File test for pic2base64< /title> <br><style> <br></style> <br><script> <br>window.onload = function(){ <br>var input = document.getElementById("demo_input") ; <br>var result= document.getElementById("result"); <br>var img_area = document.getElementById("img_area"); <br>if ( typeof(FileReader) === 'undefined' ){ <br>result.innerHTML = "Sorry, your browser does not support FileReader, please use a modern browser! "; <br>input.setAttribute( 'disabled','disabled' ); <br>} else { <br>input.addEventListener( 'change',readFile,false );} <br>} <br>function readFile (){ <br>var file = this.files[0]; <br>//Here we judge the type. If it is not an image, return it and remove it. Then you can upload any file <br>if(!/image/w /.test (file.type)){ <br>alert("Please make sure the file is of image type"); <br>return false; <br>} <br>var reader = new FileReader(); <br>reader.readAsDataURL( file); <br>reader.onload = function(e){ <br>result.innerHTML = '<img src="' this.result '" alt=""/>'; <br>img_area.innerHTML = '<div class="sitetip">Image img tag display: </div><img src="' this.result '" alt=""/>'; <br>} <br> } <br></script> <br></head> <br><body> <br><input type="file" value="sdgsdg" id="demo_input" /> <br><textarea id="result" rows=30 cols=300></textarea> <br><p id="img_area"></p> <br></body> <br> </html> <br>
</div></div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>Statement：</span><div>The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn</div></div></div><div class="nphpSytBox"><span>Previous article：<a class="dBlack" title="Questions about the ontimeupdate event of the HTML5 Video object (invalid on Chrome) _html5 tutorial tips" href="http://m.php.cn/faq/6248.html">Questions about the ontimeupdate event of the HTML5 Video object (invalid on Chrome) _html5 tutorial tips</a></span><span>Next article：<a class="dBlack" title="Questions about the ontimeupdate event of the HTML5 Video object (invalid on Chrome) _html5 tutorial tips" href="http://m.php.cn/faq/6250.html">Questions about the ontimeupdate event of the HTML5 Video object (invalid on Chrome) _html5 tutorial tips</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>Related articles</h2><em><a href="http://m.php.cn/article.html" class="bBlack"><i>See more</i><b></b></a></em><div class="clear"></div></div><ins class="adsbygoogle"
style="display:block"
data-ad-format="fluid"
data-ad-layout-key="-6t+ed+2i-1n-4w"
data-ad-client="ca-pub-5902227090019525"
data-ad-slot="8966999616"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({});
</script><ul class="nphpXgwzList"><li><b></b><a href="http://m.php.cn/faq/348281.html" title="AlloyTouch full-screen scrolling plug-in creates a smooth H5 page in 30 seconds" class="aBlack">AlloyTouch full-screen scrolling plug-in creates a smooth H5 page in 30 seconds</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/faq/348372.html" title="HTML5 actual combat and analysis of touch events (touchstart, touchmove and touchend)" class="aBlack">HTML5 actual combat and analysis of touch events (touchstart, touchmove and touchend)</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/faq/348373.html" title="Detailed explanation of image drawing examples in HTML5 canvas 9" class="aBlack">Detailed explanation of image drawing examples in HTML5 canvas 9</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/faq/348374.html" title="Regular expressions and new HTML5 elements" class="aBlack">Regular expressions and new HTML5 elements</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/faq/348469.html" title="How to combine NodeJS and HTML5 to drag and drop multiple files to upload to the server" class="aBlack">How to combine NodeJS and HTML5 to drag and drop multiple files to upload to the server</a><div class="clear"></div></li></ul></div></div><ins class="adsbygoogle"
style="display:block"
data-ad-format="autorelaxed"
data-ad-client="ca-pub-5902227090019525"
data-ad-slot="5027754603"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({});
</script><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt=""><p>Public welfare online PHP training，Help PHP learners grow quickly！</p></div><div class="footermid"><a href="http://m.php.cn/about/us.html">About us</a><a href="http://m.php.cn/about/disclaimer.html">Disclaimer</a><a href="http://m.php.cn/update/article_0_1.html">Sitemap</a></div><div class="footerbottom"><p> © php.cn All rights reserved
</p></div></div></footer><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) {
var _times = times || -1, //100次
_interval = interval || 20, //20毫秒每次
_self = this,
_selector = this.selector, //选择器
_iIntervalID; //定时器id
if( this.length ){ //如果已经获取到了，就直接执行函数
func && func.call(this);
} else {
_iIntervalID = setInterval(function() {
if(!_times) { //是0就退出
clearInterval(_iIntervalID);
}
_times <= 0 || _times--; //如果是正数就 --
_self = $(_selector); //再次选择
if( _self.length ) { //判断是否取到
func && func.call(_self);
clearInterval(_iIntervalID);
}
}, _interval);
}
return this;
}
$("table.syntaxhighlighter").wait(function() {
$('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>");
});
$(document).on("click", ".cnblogs_code_footer",function(){
$(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide();
});
$('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}});
</script></body></html>
