<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .hide{ display: none !important; } .fileBox{ padding: 40px 0 20px 0; } .fileInfo{ font-size: 14px; margin-bottom: 20px; } .close{ width: 20px; height: 20px; position: absolute; right: 10px; top: 10px; background: url('img/close.svg') no-repeat center center; z-index: 99; } .baseImg{ width: 200px; height: 200px; display: inline-block; position: absolute; top: 0; left: 0; z-index: -1; } .inputBox{ width: 200px; height: 200px; position: relative; margin-bottom: 30px; cursor: pointer; } .fileInput{ width: 100%; height: 100%; opacity: 0; cursor: pointer; } .add{ position: absolute; top: 0; left: 0; z-index: -1; width: 100%; height: 200px; line-height: 200px; text-align: center; border: 2px solid #9CC7F2; font-size: 40px; color: #B4B4B4; } </style> </head> <body> <div class="fileBox"> <div class="fileInfo">第一张图</div> <div class="inputBox"> <i class="close hide" id="close1"></i> <input type="file" name="pic" class="fileInput" id="pic1" accept="image/gif,image/jpg,image/png" onChange="inputChange('pic1','inputImg1','add1','close1')" /> <img src="" alt="" id="inputImg1" class="baseImg hide"/> <div class="add" id="add1">+</div> </div> </div> <script src="js/jquery.min.js"></script> <script> function inputChange(picId,imgId,addId,closeId){ var files = document.getElementById(picId).files; console.log(files); if(files.length == 0) return; var form = new FormData(), file = files[0]; form.append('file', file); var reader = new FileReader(); reader.readAsDataURL(file); //base64 //接收到图片时触发onload reader.onload = function(e){ var result = reader.result; console.log(result); document.getElementById(imgId).src = result; document.getElementById(imgId).classList.remove('hide'); document.getElementById(addId).classList.add('hide'); document.getElementById(closeId).classList.remove('hide'); }; // $.ajax({ // url: '/upload', // type: 'POST', // cache: false, // data: formData, // processData: false, // contentType: false // }).done(function(res) { // // }).fail(function(res) {}); } // document.getElementById('pic1').addEventListener('click', function() { this.value = ''; }, false); $(function(){ $('.close').click(function(){ $(this).addClass('hide'); $(this).siblings('.add').removeClass('hide'); $(this).siblings('img').addClass('hide'); }) }) </script> </body> </html>
效果展示：
上传图片后：
