本章給大家介紹html5實現(xiàn)把上傳的圖片轉(zhuǎn)成base64編碼在顯示(代碼實例)。有一定的參考價值，有需要的朋友可以參考一下，希望對你們有所幫助。

首先我們來詳細的看一看base64編碼：

什么是base64編碼？

Base64是一種網(wǎng)絡(luò)上最常見的用于傳輸8Bit字節(jié)代碼的編碼方式，Base64編碼可用于在HTTP環(huán)境下傳遞較長的標識信息，同時可以放在url當(dāng)中使用(采用一種用于URL的改進Base64編碼)。因為base64不懼可讀性，即所編碼的數(shù)據(jù)不會被人用肉眼所直接看到，所以具有一定的加密功能。

為什么要把圖片轉(zhuǎn)成base64編碼？

將圖片轉(zhuǎn)換成base64編碼主要是為了用在網(wǎng)頁上減少請求次數(shù)，我們的網(wǎng)站采用的都是http協(xié)議，而http協(xié)議是一種無狀態(tài)的連接，就是連接和傳輸后都會斷開連接節(jié)省資源。此時解決的方法就是盡量的減少http請求，此時base64編碼可以將圖片添加到css中，實現(xiàn)請求css即可下載下來圖片，減少了再次請求圖片的請求。

html5如何實現(xiàn)把上傳的圖片轉(zhuǎn)成base64編碼在顯示？

將圖片轉(zhuǎn)換成base64需要使用到一個html5的接口：FileReader.readAsDataURL()接口，這個接口可以將文件轉(zhuǎn)換成base64編碼格式，并且再以data：URL的形式展現(xiàn)出來

思路：

1.創(chuàng)建三個html標簽，input用來上傳圖片，textarea用來顯示base64代碼，因為base64代碼內(nèi)容很多所以使用textarea標簽，p標簽用來顯示圖片。

2.使用js調(diào)用html5的FileReader.readAsDataURL()的API，聲明三個變量用于控制圖片上傳，base64代碼顯示以及圖片的顯示。

3.img_upload.addEventListener('change',readFile,false);添加一個監(jiān)聽事件，如果上傳文件發(fā)生變化就執(zhí)行readFile函數(shù)。

4.readFile函數(shù)的內(nèi)容就是調(diào)用接口，將圖片轉(zhuǎn)換成base64再輸出。

5.在執(zhí)行轉(zhuǎn)換和輸出之前先判斷一下上傳文件是不是圖片。

代碼如下：

html5 圖片轉(zhuǎn)base64編碼

* {

margin: 0;

padding: 0;

}

.demo{

width: 100%;

margin: 50px;

}

window.onload = function() {

// 抓取上傳圖片，轉(zhuǎn)換代碼結(jié)果，顯示圖片的dom

var img_upload = document.getElementById("img_upload");

var base64_code = document.getElementById("base64_code");

var img_area = document.getElementById("img_area");

// 添加功能出發(fā)監(jiān)聽事件

img_upload.addEventListener('change', readFile, false);

}

function readFile() {

var file = this.files[0];//這里是抓取到上傳的對象。

if(!/image\/\w+/.test(file.type)) {

alert("請確保文件為圖像類型");

return false;

}

var reader = new FileReader();

reader.readAsDataURL(file);

reader.onload = function() {

base64_code.innerHTML = this.result;

//this.result里的這個result是FileReader.readAsDataURL()接口當(dāng)中轉(zhuǎn)換完圖片輸出的base64結(jié)果存放在result當(dāng)中

img_area.innerHTML = '

圖片img標簽展示：';

}

}

看看效果圖：

總結(jié)：以上就是在HTML5里實現(xiàn)圖片轉(zhuǎn)base64編碼的全部代碼，大家可以自己動手編譯試試。

與50位技術(shù)專家面對面20年技術(shù)見證，附贈技術(shù)全景圖

總結(jié)

以上是生活随笔為你收集整理的php将上传的图片转为base64,html5实现把上传的图片转成base64编码在显示（代码实例）...的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。