样式接上一篇: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图片