图片转base64编码

主要代码:

// 创建FileReader
var reader = new FileReader();
// 读取内容,读取完整则返回base64编码文件
reader.readAsDataURL(file);
//---------以上已完成图片到base64编码的转换------
// 读取操作完成后的方法
reader.onload = function () {
    // this.result
}

完整示例:


<html lang="zh">

<head>
	<meta charset="UTF-8">
	<title>图片转base64title>
	<style>
		.show-img,.show-base64{
		width:400px;
		height: 400px;
		margin-top: 20px;
		border: 1px solid #333;
		display: inline-block;
		margin-left: 20px;
		word-wrap: break-word;
		overflow: scroll;
	}
	style>
head>

<body>
	<div class="upload">
		<input type="file" id="img_upload">
	div>
	<div class="show-base64">
		<p>base64编码:p>
		<p id="base64Code">p>
	div>
	<div class="show-img">
		<p>编码后显示的图片:p>
		<img src="" id="showImg">
	div>
body>
<script>
var imgUpload = document.getElementById('img_upload');
var showImg = document.getElementById('showImg');

imgUpload.addEventListener('change', readFile, false)

function readFile() {
	var file = this.files[0];
	if (!/image\/\w+/.test(file.type)) {
		alert("请确保文件为图像类型");
		return false;
	}
	// 创建
	var reader = new FileReader();
	//开始读取内容。一旦完成,result属性中将包含一个 data:URL 格式的字符串以表示所读取文件的内容。
	reader.readAsDataURL(file);

	//---------以上已完成图片到base64编码的转换------
	// 读取操作完成后的方法
	reader.onload = function () {
		showImg.src = this.result;
		base64Code.innerHTML = this.result;
	}
}
script>

html>

你可能感兴趣的:(JavaScript)