快捷導航

使用base64對圖片的二進制進行編碼并用ajax進行顯示

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

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

使用base64對圖片的二進制進行編碼并用ajax進行顯示

有時候我們需要動態(tài)的將圖片的二進制在頁面上進行顯示，如我們需要弄一個驗證碼的功能，那么如果我們的驗證碼的圖片在后臺得到的是該圖片的二進制，那么當我們需要在頁面上點擊一個按鈕利用ajax進行切換的時候，如果在后臺直接返回的是該圖片的二進制，那么該圖片是無法進行顯示的。

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

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

實例代碼：

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

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

您可能感興趣的文章: