脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → base64 图片的二进制进行编码

使用base64对图片的二进制进行编码并用ajax进行显示

 更新时间：2017年01月03日 16:52:15   投稿：lqh  
这篇文章主要介绍了使用base64对图片的二进制进行编码并用ajax进行显示的相关资料,需要的朋友可以参考下

使用base64对图片的二进制进行编码并用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>

您可能感兴趣的文章:

相关文章

  • JS事件循环-微任务-宏任务（原理讲解+面试题分析）

    JS事件循环-微任务-宏任务（原理讲解+面试题分析）

    这篇文章主要介绍了JS事件循环-微任务-宏任务的原理，本文章含有面试题分析，不管是面试者还是想要学习相关内容的都可以很好的理解、掌握这部分内容,需要的朋友可以参考下
    2023-01-01
  • 实现瀑布流布局的三种方式

    实现瀑布流布局的三种方式

    本文详细讲解了实现瀑布流布局的三种方式，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2021-12-12
  • 详解webpack 多入口配置

    详解webpack 多入口配置

    本篇文章主要介绍了webpack 多入口配置 ，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-06-06
  • HTA版JSMin（省略修饰语若干）基于javascript语言编写

    HTA版JSMin（省略修饰语若干）基于javascript语言编写

    JSMin是一种很有用的ECMAScript代码减肥工具，虽然它只是一种较为初级的工具，但用它来对付我自己编写的大部分ECMAScript代码效果都很不错，而且在我这里也从未发生过减肥后代码出错之类的问题。
    2009-12-12
  • JavaScript this调用规则说明

    JavaScript this调用规则说明

    我希望通过这些来使你们理解各种函数调用方式的不同，让你的JavaScript代码远离bugs。
    2010-03-03
  • 彻底搞懂JS无缝滚动代码

    彻底搞懂JS无缝滚动代码

    彻底搞懂JS无缝滚动代码...
    2007-01-01
  • replace()方法查找字符使用示例

    replace()方法查找字符使用示例

    查找字符的情况下会使用replace()方法，此方法很常见也很实用，下面有个不错的示例，感兴趣的朋友可以参考下，希望对大家有所把帮助
    2013-10-10
  • js addDqmForPP给标签内属性值加上双引号的函数

    js addDqmForPP给标签内属性值加上双引号的函数

    这篇文章主要介绍了js addDqmForPP给标签内属性值加上双引号的函数,需要的朋友可以参考下
    2016-12-12
  • js生成随机数方法和实例

    js生成随机数方法和实例

    这篇文章主要介绍了js生成随机数方法和实例,由js生成一切随机数的基础都是Math.random(),有兴趣的可以了解一下。
    2017-01-01
  • 深入解析ES6中的promise

    深入解析ES6中的promise

    ES6中的promise对象很早就听说过，据说是为了解决我们使用回调产生回调地狱的问题。今天小编就带领大家通过本文学习下es6中的promise，感兴趣的朋友跟随小编一起看看吧
    2018-11-11

最新评论