SOURCE

var dropbox = document.getElementById("dropbox");
var inputarea = document.getElementById("inputarea");
var preview = document.getElementById("preview");
var output = document.getElementById("output");

/**
 * 点击输入
 */
inputarea.addEventListener('change', function(event) {
	var files = inputarea.files;
	handle("filelists", files);
}, false);

/**
 * 拖拽实现
 */
dropbox.addEventListener("dragenter", function(e){
	e.stopPropagation();
	e.preventDefault();
}, false);

dropbox.addEventListener("dragover", function(e){
	e.stopPropagation();
	e.preventDefault();
}, false);

dropbox.addEventListener("drop", function(e){
	e.stopPropagation();
	e.preventDefault();

	var dt = e.dataTransfer;
	var files = dt.files;

	handle("filelists", files);
}, false);

/**
 * 复制粘贴
 */
dropbox.addEventListener('paste', function(event){
	// 添加到事件对象中的访问系统剪贴板的接口
	var clipboardData = event.clipboardData, items, item, types;
	if(clipboardData){
		items = clipboardData.items;
		if(!items){
			return;
		}
		item = items[0];
		// 保存在剪贴板中的数据类型
		types = clipboardData.types || [];
		for(var i=0; i < types.length; i++){
			if( types[i] === 'Files'){
				item = items[i];
				break;
			}
		}
		// 判断是否为图片数据
		if(item && item.kind === 'file' && item.type.match(/^image\//i)){
			// 读取该图片          
			var blob = item.getAsFile();
			handle("blob", blob);
		}
	}
});

function handle(type, data){
	// 处理结果
	var handleResult = function(file){
		var img = document.createElement("img");
			img.file = file;
			preview.appendChild(img);

			var reader = new FileReader();
			reader.onload = (function(aImg) { 
				return function(e) { 
					aImg.src = e.target.result; 
					output.innerHTML = e.target.result;				        
				}; 
			})(img);
			reader.readAsDataURL(file);
	}

	if (type === "filelists") {
		var files = data;
		for (var i = 0; i < files.length; i++) {
			var file = files[i];
			var imageType = /^image\//;
			if (!imageType.test(file.type)) {
					continue;
			}  
			handleResult(file);
		}
	} else if (type === "blob") {
		handleResult(data);
	}
}

<div class="header">
	<h1>图片转base64编码</h1>
</div>

<div class="layout_left">
	<div id="dropbox" class="dropbox">
		<div class="area">
			<input id="inputarea" type="file" name="file" multiple="multiple" accept="image/*" />
		</div>
	</div>
	<p class="des">支持【输入框选择 】【 拖拽选择 】【 截图粘贴】三种输入方式！</p>
	<div id="preview"></div>
</div>

<div class="layout_right" id="output"></div>

*{
	margin: 0px;
	padding: 0px;
	font-family: "microsoft yahei";
}
.header{
	width: 100%;
	height: 50px;
	background-color: #00A7FF;
}
.header h1{
	text-align: center;
	line-height: 50px;
	font-size: 18px;
	color: #fff;
}
.layout_left{
	position: absolute;
		top: 100px;
	width: 340px;
		overflow-x: hidden;
		z-index: 100;
}
.layout_left .dropbox{
	width: 300px;
	height: 300px;
	margin: 20px;
		border: 3px dashed #e6e6e6;
}
.layout_left .dropbox .area{
	margin: 100px auto;
	width: 100px;
	height: 100px;
	cursor: pointer;
	z-index: 999;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAYAAADDPmHLAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAABuwAAAbsBOuzj4gAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAOCSURBVHic7d0xSxxRFIbh15DOwl47u0MglVtEEQSL5B/YxtrKX2Jlra3/QAtBCGqxVoFwunRub2G9KeYuMbOzRhJnZtfve5pBZlcvnHfvjgujS+PxGNP1ru8FWL8cgDgHIO79Sx6UmZ+AXWAAbACrbS7K/tkIuAOGwGVE3P7tCUvPXQRm5gpwBOy/1gqtUyfAYUQ8zHrAzAAycws4A9aAR+AYuAGGETF6/bXa/8rMVapdehM4AJaBe2AvIq6bntMYQHnl/6Aa/jfga0T8bGnd1oLMXAdOgW2qCD407QSzLgKP+D38HQ9/8ZSZ7VDNcI1qplOmdoBywXdDte1/9PAXW9kJvlO9HWzWLwybdoDdcjz28BdfmeFx+XK3fr4pgEE53rS1KOvcZJaD+ommADbKcdjacqxrk1lu1E80BbAK4F/13o4ns5z6AM8fBYtzAOIcgDgHIM4BiHMA4hyAOAcgzgGIcwDiHIA4ByDOAYhzAOIcgDgHIM4BiHMA4hyAOAcgzgGIkw0gM88z87zvdfTtRX8f4I363PcC5oHsDmAVByDOAYhzAOIcgDgHIM4BiHMA4hyAOAcgzgGIcwDiHIA4ByDOAYhzAOIcgDgHIM4BiHMA4hyAOAcgzgGIcwDiHIA4ByDOAYibi3sDy02avdyrl5mz/3duOy4i4kvHP3Mm7wDi5mIH6OMVMXnlR8RS1z97nngHEOcAxDkAcQ5AnAMQ5wDEOQBxDkCcAxDnAMQ5AHEOQJwDEOcAxDkAcQ5AnAMQ5wDEOQBxDkCcAxDnAMQ5AHEOQJwDEOcAxDkAcXNxb2BPLvpewDyQDWCebtHuk98CxDkAcQ5AnAMQ5wDEOQBxDkCcAxDnAMQ5AHEOQJwDEOcAxDkAcQ5AnAMQ5wDEOQBxDkBcUwAjgMxc7Xgt1pInsxzVzzUFcFeOg9ZWZF2bzPKufqIpgGE5bra2HOvaZJbD+ommAC7L8SAz11tbknWizPCgfHlZPz8VQETcAifAMnCamb5QXFBldqdUszwps/3DrOEeAvfANnDlnWDxlJldUc3wnmqmU5bG4+b/m5iZW8AZsAY8AsfADTCMiKmrSetfudofUL3nH1C98u+BvYi4bnrOzADKN1wBjoD9V1+tdeEEOIyIh1kPeDaAicz8BOxS1bUB+DOC+TSi+lVvCFw2vefXvSgAe7t8hS/OAYhzAOJ+ATeBuJOueKnYAAAAAElFTkSuQmCC");
}
.layout_left .dropbox .area input[type="file"]{
	position: relative;
	top: 0px;
	left: 0px;
	width: 100px;
	height: 100px;
	opacity: 0;
	outline: none;
	cursor: pointer;
	overflow: hidden;
	z-index: 0;
}
.layout_left #preview img{
	width: 300px;
	margin: 20px;
}
.layout_left .des{
	display: block;
	font-size: 13px;
	text-align: center;
}

.layout_right{
	position: absolute;
	top: 100px;
	left: 340px;
	right: 0px;
	word-wrap:break-word;
		background-color: #eee;
		z-index: 100;
		font-size: 15px;
}