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/[email protected]/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>
以上就这篇博客的所有内容啦,希望各位读者能自己动手试一试,就像现在,作者坐在电脑前,写着这个案例的代码,外面一群人在吃烧烤在起哄,在别人玩乐的时间里咱们坚持学习,相信功夫不负有心人。如果读者发现代码有错误的地方或自己有更高明的做法,欢迎评论区留言讨论,如果觉得不错,可以点赞转发给更多的人看到哦,转载请注明出处,感谢~
作者公众号:程序的艺术,欢迎关注一起探寻更多的程序艺术