图片上传、删除和放大预览，jQuery+layui带你来实现
jQuery老矣，尚能战否？
最近一段时间经常看到这个问题，也见过各式前端开发人员的回答，作者本人觉得在大前端时代，项目模块化开发的今天jQuery还在持续发热，为什么这么说？尽管现在有很多公司有使用Vue、React框架进行项目开发，但对于过去使用jQuery开发的老项目，在修复问题和实现新需求上还是要使用jQuery技术栈，但不得不说，这是一个从jQuery向Vue、React转型的过程。
说到jQuery，就需要提一下BootStrap和layui框架，两者都是jQuery时代的产物，和jQuery相辅相成开发出了很多优秀的项目，尽管layui在今年十月份关闭了官网，但在Gitee(码云)上还继续维护，记得最初看到这个消息的时候，作者内心澎湃，不得不感叹一声时代在变迁，技术在进步！
本文使用jQuery、layui和BootStrap写了一个支持多图片上传、单/多图片删除、本地放大进行预览的案例，在实际项目中，如果有涉及到图片上传，那基本上就离不开这些功能，既然是重复的需求，就可以拿出来写个案例供以后使用，希望读者看得尽兴。
案例引用到的文件如下，都是引用的外部cdn资源，所以本案例所写的代码可以直接复制到本地运行来查看效果。
<!-- 引入bootstrap的css文件 --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous"> <!-- 引入bootstrap的js文件 --> <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script> <!-- 引入jQuery文件 --> <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script> <!-- 引入layui的css文件 --> <link rel="stylesheet" href="https://layui.itze.cn/layui-v2.6.8/layui/css/layui.css"> <!-- 引入layui的js文件 --> <script src="https://layui.itze.cn/layui-v2.6.8/layui/layui.js"></script> 复制代码
案例的样式文件如下，都是对imgContainer图片盒子的样式代码。
<style> .imgContainer div { position: relative; display: inline-block; } .imgContainer img { width: 200px; height: 200px; margin: 10px; } /* 每张图片的X删除按钮 通过定位来实现 */ .imgContainer span { position: absolute; top: 5%; right: 5%; background-color: pink; padding: 1px; display: none; cursor: pointer; } </style> 复制代码本文案例布局是使用的BootStrap框架，在日常开发中，使用BootStrap框架能帮助我们节省很多的HTML和CSS代码，当然前提是要清楚BootStrap框架提供了哪些类供我们直接使用。
<div class="container-fluid"> <div class="row form-table-row"> <div class="col-sm-6 form-table-col"> <div class="form-group form-flex"> <button class="btn btn-primary" id="selectFile">选择文件</button> <button class="btn btn-primary" id="deleteImg">删除全部</button> </div> </div> </div> <div class="row form-table-row"> <div class="col-sm-6 form-table-col"> <div class="form-group form-flex"> <!-- imgContainer盒子用于预览图片 --> <div class="imgContainer" style=""> </div> </div> </div> </div> <div class="row form-table-row"> <div class="col-sm-6 form-table-col"> <div class="form-group form-flex"> <div class="" style=""> <!-- 初始隐藏上传图片按钮，在选择了图片后进行显示 --> <button class="btn btn-primary" id="uploadImg" style="display: none">上传</button> </div> </div> </div> </div> </div> 复制代码
下面是这个案例的重点JS代码，虽然说并不复杂，但作者在自己实现的过程中，发现如单/多图片上传、预览功能、单张图片的删除功能等，还是有些细节需要注意，因为代码注释写的比较详细，如果读者有疑惑的地方，可以多看layui框架的官方文档。
<script> var uploadInst; layui.use('upload', function() { var upload = layui.upload; //执行实例 uploadInst = upload.render({ elem: '#selectFile', // url: '/upload/', //上传接口，根据自己实际情况进行配置 auto: false, // 关闭选择文件后的自动上传 acceptMime: 'image/*', choose: function(obj) { var files = obj.pushFile(); //预读本地文件示例，不支持ie8 obj.preview(function(index, file, result) { // 每选择一张图片，就往imgContainer盒子里追加一个div $('.imgContainer').append(`<div><img src="${result}"><span onClick="deleteOne(this)">X<span></div>`); // 展示上传按钮 $('#uploadImg').css('display', 'inline-block'); // 监听删除全部图片时间 $('#deleteImg').on('click', function() { // delete files[index]; // 删除文件队列中的文件 $('.imgContainer')[0].innerHTML = ''; uploadInst.config.elem.next()[0].value = ''; // 允许覆盖选择同一个文件 if ($('.imgContainer img').length == 0) { $('#uploadImg').css('display', 'none'); } }); // 鼠标经过图片所在盒子就显示左上角的X $('.imgContainer div').on('mouseenter', function(e) { $($(this)[0].children[1]).css('display', 'inline-block'); }); // 鼠标离开图片所在盒子就隐藏左上角的X $('.imgContainer div').on('mouseleave', function(e) { $($(this)[0].children[1]).css('display', 'none'); }); // 监听图片点击事件 $('.imgContainer div img').on('click', function() { layer.open({ type: 4, tips: 1, // 弹出层在下方 content: ['<img style="width:400px;height:400px" src="' + $(this)[0].src + '">', this], shade: 0, // 不显示遮罩 area: ['450px', '430px'], // 设置宽高 time: 1000 // 1秒后自动隐藏弹出层 }); }) }); }, done: function(res) { //上传完毕回调 }, error: function() { //请求异常回调 } }); }); // 删除单张照片 function deleteOne(that) { uploadInst.config.elem.next()[0].value = ''; $($(that)[0].parentNode)[0].innerHTML = ''; if ($('.imgContainer img').length == 0) { $('#uploadImg').css('display', 'none'); } } </script> 复制代码以上就这篇博客的所有内容啦，希望各位读者能自己动手试一试，就像现在，作者坐在电脑前，写着这个案例的代码，外面一群人在吃烧烤在起哄，在别人玩乐的时间里咱们坚持学习，相信功夫不负有心人。如果读者发现代码有错误的地方或自己有更高明的做法，欢迎评论区留言讨论，如果觉得不错，可以点赞转发给更多的人看到哦，转载请注明出处，感谢~
作者公众号：程序的艺术，欢迎关注一起探寻更多的程序艺术\
作者：不在不再
链接：https://juejin.cn/post/7041846461134290952