转至 :https://blog.csdn.net/qq_37610423/article/details/84319410
效果图:
我在用这个的时候发现博主少写了一些东西,导致功能无法实现,所以我改了一些东西直接复制就可以了
Html代码:
<div class="file-box clearboth" id="fileBox"> <label class="clone-dom" style="display:none;"> <input type="file" class="file-btn" name="img[]"/> </label> <div class="review-box"></div> <label><input type="file" class="file-btn clone-dom" name="img[]"/> </label> </div>
js代码:
记得引用Jquery文件!!!!!
<script type="text/javascript"> //一定要记得加这个 $(document).ready(function(){ //获取文件url function createObjectURL(blob){ if (window.URL){ return window.URL.createObjectURL(blob); } else if (window.webkitURL){ return window.webkitURL.createObjectURL(blob); } else { return null; } } var box = $("#fileBox .review-box"); //显示图片box var file = $("#file"); //file对象 var domFragment = document.createDocumentFragment(); //文档流优化多次改动dom $("#fileBox").on("click", ".file-btn",function(){ var index = $(this).parent().index(); if(index == 6){ alert("最多可以上传4张图片!"); return false; } }); //触发选中文件事件 $("#fileBox").on("change", ".file-btn", function(event){ var imgNum = parseInt($("#fileBox .review-box img").length); if(imgNum < 4){ var file = event.target.files; //获取选中的文件对象 var imgTag = $("<img src=''/>"); var fileName = file[0].name; //获取当前文件的文件名 var url = createObjectURL(file[0]); //获取当前文件对象的URL //忽略大小写 var jpg = (fileName.indexOf(".jpg") > -1) || (fileName.toLowerCase().indexOf(".jpg") > -1); var png = (fileName.indexOf(".png") > -1) || (fileName.toLowerCase().indexOf(".png") > -1); var jpeg = (fileName.indexOf(".jpeg") > -1) || (fileName.toLowerCase().indexOf(".jpeg") > -1); var jpeg = (fileName.indexOf(".gif") > -1) || (fileName.toLowerCase().indexOf(".gif") > -1); var jpeg = (fileName.indexOf(".bmp") > -1) || (fileName.toLowerCase().indexOf(".bmp") > -1); //判断文件是否是图片类型 if(jpg || png || jpeg || gif || bmp){ imgTag.attr("src",url); }else{ alert("请选择合适的图片类型文件!"); } //最佳显示 var imgbox = $("<div class='prev-item'><span class='closebtn'>×</span></div>"); imgbox.append(imgTag); box.append(imgbox); event.target.parentNode.style.display = "none"; var cloneDom = $(".clone-dom").eq(0).clone().removeAttr("style"); $("#fileBox").append(cloneDom); } }); $(".review-box").on("click", ".prev-item", function(){ var index = $(this).index(); $(this).remove(); $("#fileBox label:eq(" + (index + 1) + ")").remove(); }); }); </script>
CSS代码:
#fileBox{ margin:/*1*/rem 0; } #fileBox label{ border: 1px solid #ccc; display:block; float:left; height:60px; 60px; background:url(../img/images/images/xiang1_06.png) no-repeat center; background-size: .19rem; background-color: #ccc; margin-left: .17rem; } #fileBox .file-btn{ height:50px; 50px; margin:0 .5rem .5rem 0;opacity:0; } #fileBox .review-box{ display:block; float:left; margin-left: .17rem; } #fileBox .review-box img{ height:60px; 60px; margin:0 .1rem .2rem 0; } #fileBox .prev-item{ position:relative;display:inline-block; } #fileBox .prev-item .closebtn{ position:absolute; right: -1px; top: -4px; display: block; height: 14px; 14px; color: #fff; font-size: 16px; line-height:14px; text-align: center; background: red; border-radius: 10px; } #fileBox .prev-item .closebtn { position: absolute; right: 7px; top: -4px; display: block; height: 14px; 14px; color: #fff; font-size: 16px; line-height: 14px; text-align: center; background: #8E8E93; border-radius: 10px; }