js 选择图片并在页面预览（以base64形式）

样式接上一篇：css 上传图片时的框（div里画加号“+”）

• html

<div id="img_div">
	<img id="imgSelf">
	<input type="file" id="imgUpload" accept="image/*" style="display:none;">
</div>

• js

// 点击弹出文件夹
$("#imgSelf").click(function(){
	$("#imgUpload").click();
});

// 选择图片并显示
$("#imgUpload").change(function() {
	var obj = document.getElementById("imgUpload");
	var oFReader = new FileReader();
	oFReader.readAsDataURL(obj.files[0]);
	oFReader.onload = function(oFREvent) {
	
		// 消除伪元素“+”
		var style=document.createElement('style');//创建一个<style>标签
		var change=document.createTextNode('#img_div:before{content:none;} #img_div:after{content:none;}')//更改后伪元素的样式
		style.appendChild(change);//把样式添加到style标签里
		document.body.appendChild(style);//把内联样式表添加到html中
		
		// 图片以base64的形式显示在页面
		var base64 = oFREvent.target.result;
		$("#imgSelf").attr("src", base64);
	}
});

页面样式：

点击加号“+”：

弹出文件夹，选择图片：

完成后效果：

接下一篇：python接收base64图片