快捷導(dǎo)航

使用base64對(duì)圖片的二進(jìn)制進(jìn)行編碼并用ajax進(jìn)行顯示

更新時(shí)間：2017年01月03日 16:52:15 投稿：lqh

這篇文章主要介紹了使用base64對(duì)圖片的二進(jìn)制進(jìn)行編碼并用ajax進(jìn)行顯示的相關(guān)資料,需要的朋友可以參考下

使用base64對(duì)圖片的二進(jìn)制進(jìn)行編碼并用ajax進(jìn)行顯示

有時(shí)候我們需要?jiǎng)討B(tài)的將圖片的二進(jìn)制在頁(yè)面上進(jìn)行顯示，如我們需要弄一個(gè)驗(yàn)證碼的功能，那么如果我們的驗(yàn)證碼的圖片在后臺(tái)得到的是該圖片的二進(jìn)制，那么當(dāng)我們需要在頁(yè)面上點(diǎn)擊一個(gè)按鈕利用ajax進(jìn)行切換的時(shí)候，如果在后臺(tái)直接返回的是該圖片的二進(jìn)制，那么該圖片是無法進(jìn)行顯示的。

直接返回字節(jié)流給img標(biāo)簽的src是可以的，如<img src="servlet/CheckCode">，但在之后進(jìn)行切換的時(shí)候使用ajax請(qǐng)求，如果僅僅返回圖片的二進(jìn)制然后把它傳給img的src是不能的，目前的方法是把圖片的二進(jìn)制進(jìn)行base64編碼，

然后在頁(yè)面上以下列方式進(jìn)行顯示，<img src="data:image/jpeg;base64,result">,其中的result是經(jīng)過base64編碼后的內(nèi)容，這樣就可以使用后臺(tái)直接利用圖片的二進(jìn)制進(jìn)行圖片的顯示了

實(shí)例代碼：

<!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是經(jīng)過base64編碼后的內(nèi)容
    $("img").attr("src","data:image/jpeg;base64,"+data);
    });
   });
   
   });
   function init() {
   $.post("servlet/CheckCode",{},function(data) {
    //其實(shí)在第一次運(yùn)行的時(shí)候是可以直接將圖片的二進(jìn)制作為Image的src進(jìn)行顯示的，但是因?yàn)楹笈_(tái)統(tǒng)一返回的是
    //經(jīng)過base64編碼過后的內(nèi)容，所以這里初始顯示的時(shí)候也是利用base64的方法
    $("img").attr("src","data:image/jpeg;base64,"+data);
   });
   }
  </script>

 </head>
 
 <body>
  <img alt="" width=100 >
  <input type="button" value="換一張"/>
 </body>
</html>

您可能感興趣的文章: