上传图片功能，这个功能目前已经很普遍了，几乎每一个业务里都有这个功能，me做了一个基于原生+jquery上传图片功能(并且拓展了缩略图、预览、删除等功能)，以此现在做一个笔记以便以后使用，Hope to help you.
废话不多说直接上代码
一、html代码块
<div class="box">
<div class="demos">
<label><span style="color: #ff0000;">*</span>图片：<i class="icon-img" id="div_imgfile"></i></label>
<input type="file" multiple="multiple" capture="camera" accept='image/*' id="fileItem" num="9" style="display: none;">
<div id="imgContainer_waitForUpload"></div>
<div class="previewBox" onclick="previewBoxClose()">
<img src="" alt="" id="previewImg" onclick="previewBoxClose()">
</div>
</div>
</div>
二、css代码
<style>
.ui-content {
height: calc(100vh - 100px - 2em);
}
p{
font-weight: 400;
text-align: center;
}
/*box模块*/
.box{
width: 300px;
margin: 60px auto 16px;
overflow: hidden;
background: #ffffff;
border: 1px solid #5e6264;
box-shadow: 1px 3px 9px -8px;
border-radius: 4px;
}
.box .demos{
padding: 10px;
overflow: hidden;
position: relative;
}
.box .demos label{
width: 100%;
letter-spacing: 1px;
font-size: 16px;
color: #333;
}
.box .demos input{
width: calc(100% - 12px);
border: 0px;
padding: 12px 6px;
font-size: 16px;
color: #888;
}
.box .demos label .icon-img{
width: 28px;
height: 26px;
color: #999;
float: right;
margin-right: 10px;
display: inline-block;
background-image: url(img/icon-img.png);
background-position: 0 0;
background-repeat: no-repeat;
background-size: 100%;
}
/*缩略图*/
#imgContainer_waitForUpload{
width: 100%;
height: auto;
}
#imgContainer_waitForUpload .lookimg{
width: 50px;
height: 50px;
float: left;
margin: 16px 10px 10px;
position: relative;
}
#imgContainer_waitForUpload .lookimg img{
width: 100%;
height: 100%;
}
#imgContainer_waitForUpload .lookimg .lookimg_delBtn{
width: 20px;
height: 20px;
position: absolute;
top: -6px;
right: -6px;
display: block;
background-image: url(img/icon-close.png);
background-repeat: no-repeat;
background-size: 100%;
background-position: 0 0;
}
/*遮罩层*/
.previewBox{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background-color: rgba(0,0,0,.5);
z-index: 2;
display: none;
}
.previewBox img{
width: 100%;
height: auto;
}
</style>
三、js代码块
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
var div_imgfile = document.getElementById('div_imgfile');
var fileItem = document.getElementById('fileItem');
//点击触发input file点击
div_imgfile.onclick = function () {
if ($(".lookimg").length >=1) {
alert("先点击“确定上传”按钮上传后，再上传其他图片！也可以一次性选择多个图片上传！");
//alert("安卓机手机端最多上传一个图片上传！");
return;
};
return $("#fileItem").click();//打开对象选择框
};
//选中后点击确定触发的onchange事件
fileItem.onchange = function setBlogrollImageName(e){
var file = null;
if(e.path[0].id == "fileItem"){
var filesItem = e.path[0].files;
if (filesItem.length >= 9) {
alert("一次最多上传" + 9 + "张图片");
return;
}else {
for(var i = 0;i< filesItem.length;i++){
file = filesItem[i];
// FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据。
// 有关FileReader的讲解：https://www.jianshu.com/p/42fd93f08554
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function(val) {
//compress三个参数
//imgUrl：读取选中文件的数据(本文章主要针对选中图片的数据)，
compress(this.result);
};
}
};
}
};
//渲染图片方法
function compress(imgUrl) {
//创建预览外层
var _prevdiv = document.createElement("div");
_prevdiv.setAttribute("class", "lookimg");
//创建内层img对象
var preview = document.createElement("img");
preview.setAttribute("onclick", "lookimgFun(this)");
preview.src = imgUrl;//读取加载，将图片编码绑定到元素
$(_prevdiv).append(preview);
//创建删除按钮
var img_belbtn = document.createElement("div");
img_belbtn.setAttribute("class", "lookimg_delBtn");
img_belbtn.setAttribute("onclick", "romoveLookimg(this)");
$(_prevdiv).append(img_belbtn);
//显示到待传列表中
$("#imgContainer_waitForUpload").append(_prevdiv);
}
//删除选中图片
function romoveLookimg(val){
$(val).parent().remove();
}
//预览图片
function lookimgFun(val){
var src_value = $(val).attr('src');
$('.previewBox').css("display","block");
$('#previewImg').attr('src',src_value);
var previewImgheight = $('#previewImg').height();
var clientHeight = document.body.clientHeight;
var num = null;
if(previewImgheight < clientHeight){
num = (clientHeight - previewImgheight)/2;
}
$('#previewImg').css("margin-top",num);
}
//预览图片关闭功能
function previewBoxClose(){
$('.previewBox').css("display","none");
}
</script>
四、效果图
dome.png
五、其他
本文章主要是围绕FileReader 对象实现获取本地图片并进行转换成64Base编码格式，并实现上传图片功能；
分享一下有关FileReader对象讲解链接：https://www.jianshu.com/p/42fd93f08554!
网友评论