Layui实现图片页面预览功能

最新推荐文章于 2024-04-28 14:08:30 发布

z60015260

最新推荐文章于 2024-04-28 14:08:30 发布

阅读量1k

点赞数

文章标签： layui 前端 javascript

本文链接：https://blog.csdn.net/qq_27454363/article/details/134093190

版权

1.页面实现图片预览功能，点击时图片可以放大

2.效果图

3.点击时图片放大，图片背景处关闭图片放大

4.LayUI代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<link rel="stylesheet" href="../../../static/lib/layui-v2.6.3/css/layui.css" media="all">
	<link rel="stylesheet" href="../../../static/css/public.css" media="all">
    <style>
        body {
            background-color: #ffffff;
        }
    </style>
</head>
<body>
<div class="layuimini-container">
	<div>
		<button type="submit" class="layui-btn layui-btn-normal"  lay-submit lay-filter="data-search-btn" id="refresh"><i class="layui-icon layui-icon-fonts-clear"></i> 刷新 </button>
	</div>

    <div class="layuimini-main">
		<div class="layui-row" id="imageContainer"></div>

    </div>
</div>
<!-- <div class="layui-container">
	<div class="layui-row" id="imageContainer"></div>
</div> -->
<script src="../../../static/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>

<script>
    layui.use(['form'], function () {
        var form = layui.form,
            layer = layui.layer,
            $ = layui.$;
		
		// ajax 头部增加csrf_token
		var token = "{{ csrf_token }}"
		$.ajaxSetup({
		    headers: { 
			 'X-CSRFTOKEN': `${token}`,
			 'AUTHORIZATION': 'Bearer ' + localStorage.token,
			 }, // JWTAuthentication.authenticate()方法获取 header = request.META.get(api_settings.AUTH_HEADER_NAME),
		});
		
		$.ajaxSetup({
			complete: function (XMLHttpRequest, textStatus) {
				if (XMLHttpRequest.status === 401) {  // 401 表示未授权，即 token 无效
					layer.msg('授权已过期，需重新登陆', { icon: 2, time: 2000 }, function () {
						window.location.href = '/login';
					})
				}
			}
		});
		
		// 获取图片路径的接口
		var apiUrl = '/pic/getImages';
	
		  // 加载图片
		function loadImages(images, names) {
			var imageContainer = document.getElementById('imageContainer');
			for (var i = 0; i < images.length; i++) {
			  var imageDiv = document.createElement('div');
			  imageDiv.className = 'layui-col-md3';
			  var image = document.createElement('img');
			  image.className = 'layui-table-img';
			  image.src = images[i];
			  image.style.width = '460px'; // 设置图片宽度
			  image.style.height = '240px'; // 设置图片高度
			  image.style.padding = '5px'; // 设置内边距
			  var caption = document.createElement('p');
			  caption.textContent = names[i]; // 设置文字内容
			  caption.style.padding = '5px'; // 设置内边距
			  imageDiv.appendChild(caption); // 将文字说明添加到图片的父元素中
			  imageDiv.appendChild(image);
			  
			  imageContainer.appendChild(imageDiv);
			}
		  }
	
		  // 绑定图片查看器事件
		function bindImageViewerEvent() {
			var images = document.getElementsByClassName('layui-table-img');
			for (var i = 0; i < images.length; i++) {
			  images[i].onclick = function() {
				var src = this.src;
				layer.photos({
				  photos: {
					data: [{
					  src: src
					}]
				  },
				  shadeClose: true,
				  closeBtn: 1,
				  anim: 5,
				  full:true
				});
			  };
			}
		  }
		  
		$(function(){   //js 加载时，AJAX请求
			  layui.$.ajax({
				url: '/pic/getImages',
				type: 'GET',
				success: function(res) {
				if (res.code === 0) {
				  var images = res.url;
				  var names = res.name;
				  loadImages(images, names);
				  bindImageViewerEvent();
				} else {
				  layer.msg('获取图片失败');
				}
				},
				error: function() {
				layer.msg('获取图片失败');
				}
			  });
		});
	
		
		function fetchPic(){
			$('#imageContainer').empty();  // 先清空
			// 使用Ajax获取图片路径
			layui.$.ajax({
			  url: '/pic/getImages',
			  type: 'GET',
			  success: function(res) {
				if (res.code === 0) {
				  var images = res.url;
				  var names = res.name;
				  loadImages(images, names);
				  bindImageViewerEvent();
				} else {
				  layer.msg('获取图片失败');
				}
			  },
			  error: function() {
				layer.msg('获取图片失败');
			  }
			});
		  };
		
		
		// 点击按钮时执行 AJAX 请求
		var button = document.getElementById('refresh');
		button.addEventListener('click', fetchPic);
		
});

</script>



</body>
</html>