html5实现把上传的图片转成base64编码在显示（代码实例）-

本章给大家介绍html5实现把上传的图片转成base64编码在显示（代码实例）。有一定的参照 价值，有需要的伴侣可以参照 一下，但愿对你们有所帮忙。 本章给大家介绍html5实现把上传的图片转成base64编码在显示（代码实例）。有一定的参照 价值，有需要的伴侣可以参照 一下，但愿对你们有所帮忙。

第一我们来细致的看一看base64编码：

什么是base64编码？

Base64是一种网络上最常见的用于传输8Bit字节代码的编码方式，Base64编码可用于在HTTP环境下通报较长的标识信息，同时可以放在url傍边运用（采纳一种用于URL的改善Base64编码）。由于base64不惧可读性，即所编码的数据不会被人用肉眼所直接看到，所以拥有一定的加密功能。

为何要把图片转成base64编码？

将图片转换成base64编码主如果为了用在网页上减少要求次数，我们的网站采纳的都是http协定，而http协定是一种无状态的连贯，就是连贯和传输后都会断开连贯节俭资源。此时解决的办法就是尽量的减少http要求，此时base64编码可以将图片增加到css中，实现要求css即可下载下来图片，减少了再次要求图片的要求。

html5怎样实现把上传的图片转成base64编码在显示？

将图片转换成base64需要运用到一个html5的接口：FileReader.readAsDataURL()接口，这个接口可以将文件转换成base64编码格局，而且再以data：URL的情势展示出来
思绪：

1.新建三个html标签，input用来上传图片，textarea用来显示base64代码，由于base64代码内容许多所以运用textarea标签，p标签用来显示图片。
2.运用js调取html5的FileReader.readAsDataURL()的API，声明三个变量用于控制图片上传，base64代码显示以及图片的显示。
3.img_upload.addEventListener('change',readFile,false);增加一个监听事件，要是上传文件产生变化就施行readFile函数。
4.readFile函数的内容就是调取接口，将图片转换成base64再输出。
5.在施行转换和输出以前先推断一下上传文件是不是图片。

代码如下：

	
		
		
		
		
    
    



    

    
打赏
    

    

    	
        
    	

    		
感谢您的支持，我会继续努力的!
    	
    	

    		
    	
    		
扫码打赏，你说多少就多少
    	

    		

	    		
	    		
    		
    		

	    		
	    		
    		
    	
    	

    		
打开支付宝扫一扫，即可进行扫码打赏哦
    		
百分百源码网 建议打赏1～10元，土豪随意，感谢您的阅读！