效果图：
网络异常，图片无法展示
|
<!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>
