使用base64对图片的二进制进行编码,使其可以利用ajax进行显示

简介: 有时候我们需要动态的将图片的二进制在页面上进行显示,如我们需要弄一个验证码的功能,那么如果我们的验证码的图片在后台得到的是该图片的二进制,那么当我们需要在页面上点击一个按钮利用ajax进行切换的时候,如果在后台直接返回的是该图片的二进制,那么该图片是无法进行显示的。

有时候我们需要动态的将图片的二进制在页面上进行显示,如我们需要弄一个验证码的功能,那么如果我们的验证码的图片在后台得到的是该图片的二进制,那么当我们需要在页面上点击一个按钮利用ajax进行切换的时候,如果在后台直接返回的是该图片的二进制,那么该图片是无法进行显示的。

直接返回字节流给img标签的src是可以的,如<img src="servlet/CheckCode">,但在之后进行切换的时候
使用ajax请求,如果仅仅返回图片的二进制然后把它传给img的src是不能的,目前的方法是把图片的二进制进行base64编码,
然后在页面上以下列方式进行显示,<img src="data:image/jpeg;base64,result">,其中的result是经过
base64编码后的内容,这样就可以使用后台直接利用图片的二进制进行图片的显示了

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>code.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript">
    	$(function() {
    		
    		init();
    	
    		$("[type='button']").click(function() {
    			$.post("servlet/CheckCode",{},function(data) {
    				//注意这里src的写法,data是经过base64编码后的内容
    				$("img").attr("src","data:image/jpeg;base64,"+data);
    			});
    		});
    		
    	});
    	function init() {
    		$.post("servlet/CheckCode",{},function(data) {
    			//其实在第一次运行的时候是可以直接将图片的二进制作为Image的src进行显示的,但是因为后台统一返回的是
    			//经过base64编码过后的内容,所以这里初始显示的时候也是利用base64的方法
   				$("img").attr("src","data:image/jpeg;base64,"+data);
   			});
    	}
    </script>

  </head>
  
  <body>
    <img alt="" width=100 >
    <input type="button" value="换一张"/>
  </body>
</html>
 
目录
相关文章
|
Web App开发 JavaScript 前端开发
前端接收数据流实现图片预览效果--ajax 请求二进制流 图片 文件 XMLHttpRequest 请求并处理二进制流数据 之最佳实践
本文为转载文章 原文链接:https://www.cnblogs.com/cdemo/p/5225848.html 首先要谢谢这位大神的无私贡献!解决了我的问题也完美表达了我当时的心路历程 ajax 请求二进制流 图片 文件 XMLHttpRequest 请求并处理二进制流数据 之最佳实践 写在前面 :从提出需求到完美的解决问题,实现过程是曲折的。
8089 0
|
5月前
|
JavaScript 前端开发 安全
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
|
XML 前端开发 JavaScript
JS案例:ajax获取图片列表
JS案例:ajax获取图片列表
214 0
JS案例:ajax获取图片列表
|
前端开发
使用SpringMvc跨服务器上传图片,Ajax异步刷新图片框显示图片功能请求不到后台,onChange事件没有激活的源码?
使用SpringMvc跨服务器上传图片,Ajax异步刷新图片框显示图片功能请求不到后台,onChange事件没有激活的源码?
100 0
使用SpringMvc跨服务器上传图片,Ajax异步刷新图片框显示图片功能请求不到后台,onChange事件没有激活的源码?
|
前端开发 安全 JavaScript
使用Servlet+AJAX+AWT实现网站登录时的图片验证码功能
使用Servlet+AJAX+AWT实现网站登录时的图片验证码功能
197 0
使用Servlet+AJAX+AWT实现网站登录时的图片验证码功能
|
开发框架 移动开发 前端开发
ASP.NET MVC中使用jQuery Ajax通过FormData对象异步提交图片文件到服务端保存并返回保存的图片路径
ASP.NET MVC中使用jQuery Ajax通过FormData对象异步提交图片文件到服务端保存并返回保存的图片路径
286 0
|
前端开发
ajax图片上传
ajax图片上传
158 0
|
JSON 前端开发 JavaScript
ajax实现异步上传图片
ajax方法的使用,多文件的上传,
6659 0