效果图：
<!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="/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>
这是源文件背景：
如果觉得《原生js实现图片单张上传及批量上传》对你有帮助，请点赞、收藏，并留下你的观点哦！
