个人中心
退出
原生js实现图片单张上传及批量上传
效果图：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>pc图片上传</title>
<style>
.up{ display: inline-block; vertical-align: middle; border:1px
solid #eaeaea;box-sizing: border-box; text-align: left; margin-right:
20px;
margin-bottom: 20px; width:240px; height: 240px; }
.tips{color: #999999;text-align: center;position: absolute;bottom:0;left: 96px;}
.Input{ position: relative; width: 240px; height: 240px; background: url(add.png)no-repeat center center; }//这里的图片背景源文件在下面。
.on{ position: relative; display: inline-block; text-align: left;
margin-right: 20px; margin-bottom: 20px; width: 240px; height: 240px;
display: none; position: relative; overflow: hidden; line-height: 200px;
}
/*新增加的img*/
.on img{ width: 100%; height: auto; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin:auto; }
.on div{position: absolute; height: 40px;width: 100%;bottom: 12px;z-index: 10;text-align: center;}
.on div p:nth-child(1){ float: left; width: 50%; line-height: 40px;
font-size: 14px; cursor: pointer; color: #666666; background-color:
#f4f4f4; }
.on div p:nth-child(2){ cursor: pointer; float: left;
width: 50%; font-size: 14px; color: #666666; line-height: 40px;
background-color: #f8f8f8; }
.up input{ width: 240px; height: 240px; opacity: 0; }
.button{ margin-top: 30px; }
/*批量上传*/
.button .set{ display: inline-block; width: 216px; height: 36px;
background:url(btn_upload_off.png); background-size: 100% 100%; }
.set input{ width: 216px; height: 36px; opacity: 0; }
.submit{width: 100px; text-align: center; margin-top: 20px;
border: 1px solid #333333; padding: 10px 0; border-radius: 4px;}
</style>
</head>
<body>
<section id="content">
<ul class="baohan">
<li class="up">
<div class="Input">
<input type="file" name="" class="fileinput">
<p class="tips">添加图片</p>
</div>
<div class="on">
<div>
<p>排序</p>
<p class="del">删除</p>
</div>
</div>
</li>
<li class="up">
<div class="Input">
<input type="file" name="" class="fileinput" ">
<p class="tips">添加图片</p>
</div>
<div class="on">
<div>
<p>排序</p>
<p class="del">删除</p>
</div>
</div>
</li>
<li class="up">
<div class="Input">
<input type="file" name="" class="fileinput" ">
<p class="tips">添加图片</p>
</div>
<div class="on">
<div>
<p>排序</p>
<p class="del">删除</p>
</div>
</div>
</li>
<div class="button">
<div class="set"><input type="file" name="" multiple="multiple" id="piliang"></div>
</div>
<div class="submit">提交</div>
</ul>
</section>
</body>
<script src="https://unpkg.com/jquery@3.4.1/dist/jquery.js"></script>
<script>
$(document).ready(function(){
$(".fileinput").change(function(){
var file=this.files[0];
readFile(file,$(this).parent().siblings(".on"));
});
$(".on").mouseover(function(){
$(this).children("div").show();
});
$(".on").mouseout(function(){
$(this).children("div").hide();
});
$(".del").click(function () {
$(".on>div").hide();
$(this).parent().parent().hide();
$(this).parent().parent().siblings(".Input").show();
$(this).parent().siblings("img").remove()
$(".fileinput").val("");
});
var on =document.querySelector(".on");
// 需要把阅读的文件传进来file element是把读取到的内容放入的容器
function readFile(file,element) {
// 新建阅读器
var reader = new FileReader();
// 根据文件类型选择阅读方式
switch (file.type){
case 'image/jpg':
case 'image/png':
case 'image/jpeg':
case 'image/gif':
reader.readAsDataURL(file);
break;
}
// 当文件阅读结束后执行的方法
reader.addEventListener('load',function () {
// 如果说让读取的文件显示的话 还是需要通过文件的类型创建不同的标签
switch (file.type){
case 'image/jpg':
case 'image/png':
case 'image/jpeg':
case 'image/gif':
var img = document.createElement('img');
img.src = reader.result;
element.append(img);
element.siblings(".Input").hide();
element.show();
break;
}
});
}
// 批量上传
var piliang = document.querySelector('#piliang');
var on = $('.on');
piliang.addEventListener('change',function () {
for (var i = 0;i < this.files.length;i++){
var file = this.files[i];
on.eq(i).children(".cha").next().remove();
readFile(file,on.eq(i));
}
});
//
var on = $(".on");
$(".submit").click(function () {
for (var i = 0; i < 10; i++) {
console.log(on[i].childNodes.length);
if (on[i].childNodes.length==6){
alert("上传成功");
return
}else{
alert("上传照片不足十张");
$(".next").attr("href","javascript:void(0)");
return;
}
}
});
});
</script>
</html>
这是源文件背景：
作者：Vam的金豆之路
主要领域：前端开发
我的微信：maomin9761
微信公众号：前端历劫之路
分类导航