前端展示静态路径,将路径加密,并且不影响图片以及文件的展示,此代码仅提供思路

<div field="title" renderer="onRenderer" width="70%" visible="true" allowSort="false" align="left" headerAlign="center">放置文件名(已加密)</div>

<!-- 弹出窗口 -->
<div id="myModal" class="modal">
    <span class="close">&times;</span>
    <img class="modal-content" id="modalImage" draggable="true">
</div>
//每个单元格渲染值,将文本替换成以下html值
var onRenderer = function(e){
	//正式系统路径
	//return "<a href='"+AMISHOST+"'uploadimportfile/"+e.record.url+"' target='_blank' style='text-decoration: none;'>"+e.value+"</a>";
	//测试系统路径
	//http://192.168.100.51:8081/AMIS/uploadimportfile/"+e.record.url+"
	var fileUrl = e.record.url;
	var fileType = fileUrl.substr(fileUrl.lastIndexOf('.') + 1);
	return "<a href='"+加密文件路径(fileUrl)+"' data-type='"+fileType+"' target='_blank' style='text-decoration: none;' οnclick='handleClick(event)'>"+e.value+"</a>";
};

// 获取元素
var modal = document.getElementById("myModal");
var imageLink = document.getElementById("imageLink");
var modalImage = document.getElementById("modalImage");
var closeBtn = document.getElementsByClassName("close")[0];
var scale = 1; // 图片缩放比例
var isDragging = false; // 是否正在拖动图片
var startX, startY; // 拖动起始坐标
var minScale = 0.5; // 最小缩放比例为原图的50%
var maxScale = 2.0; // 最小缩放比例为原图的50%
var handleClick = function(event){
	var fileName = event.srcElement.attributes.href.value;
	//注意,这里获取的是data-type属性值,且或者放在第二个属性位置
	var fileType = event.srcElement.attributes[1].value;
	event.preventDefault(); // 阻止链接默认行为
	$.ajax({
	  url: '请求路径',
	  type: 'GET',
	  data: {u:已加密的文件名字 }
	})
	.done(function(response) {
		if(fileType.indexOf("jpg")!=-1||fileType.indexOf("png")!=-1||fileType.indexOf("jpeg")!=-1){
			modal.style.display = "block"; // 显示弹出窗口
			modalImage.src = 'data:images/jpg;base64,'+response;
		}else if(fileType.indexOf("pdf")!=-1){
			window.open('data:application/pdf;base64,'+response, '_blank');
		}
	})
	.fail(function(jqXHR, textStatus, errorThrown) {
	  console.error('请求失败:', errorThrown);
	});
};

// 点击关闭按钮关闭弹出窗口
closeBtn.addEventListener("click", function() {
  modal.style.display = "none"; // 隐藏弹出窗口
  scale = 1; // 重置缩放比例
  modalImage.style.transform = "scale(1)"; // 还原图片缩放
  modalImage.style.left = "0px"; // 重置水平位置
  modalImage.style.top = "0px"; // 重置垂直位置
});

// 点击弹出窗口之外的区域关闭弹出窗口
window.addEventListener("click", function(event) {
  if (event.target == modal) {
	modal.style.display = "none"; // 隐藏弹出窗口
	scale = 1; // 重置缩放比例
	modalImage.style.transform = "scale(1)"; // 还原图片缩放
	modalImage.style.left = "0px"; // 重置水平位置
	modalImage.style.top = "0px"; // 重置垂直位置
  }
});

//禁止用户右击列出浏览器菜单
window.addEventListener('contextmenu', function (e) {
  e.preventDefault();
});

// 鼠标滚轮事件监听器
modalImage.addEventListener("wheel", function(event) {
  event.preventDefault(); // 阻止滚轮默认行为

  // 根据滚轮的delta值,调整缩放比例
  if (event.deltaY < 0) {
    scale += 0.3; // 放大图片
  } else {
    scale -= 0.2; // 缩小图片
	// 最多缩小到原图的50%
	if (scale < minScale) {
	  scale = minScale;
	}
	if (scale > maxScale) {
	  scale = maxScale;
	}
  }

  // 设置图片缩放
  modalImage.style.transform = "scale(" + scale + ")";
});

// 鼠标按下事件监听器
modalImage.addEventListener("mousedown", function(event) {
  event.preventDefault(); // 阻止默认行为
  isDragging = true; // 标记开始拖动
  startX = event.clientX; // 记录起始水平坐标相对于图片左上角的偏移量
  startY = event.clientY; // 记录起始垂直坐标相对于图片左上角的偏移量
});

// 鼠标移动事件监听器
modalImage.addEventListener("mousemove", function(event) {
  if (isDragging) {
    var deltaX = (event.clientX - startX)*1.9; // 计算水平移动距离,增加1.7倍的移动速度
    var deltaY = (event.clientY - startY)*1.9; // 计算垂直移动距离,增加1.7倍的移动速度
    var currentX = parseFloat(getComputedStyle(modalImage).left) + deltaX; // 计算当前水平位置
    var currentY = parseFloat(getComputedStyle(modalImage).top) + deltaY; // 计算当前垂直位置
    modalImage.style.left = currentX + "px"; // 设置水平位置
    modalImage.style.top = currentY + "px"; // 设置垂直位置
	startX = event.clientX; // 更新起始水平坐标
	startY = event.clientY; // 更新起始垂直坐标
  }
});

// 鼠标释放事件监听器
modalImage.addEventListener("mouseup", function(event) {
  isDragging = false; // 标记结束拖动
});

// 鼠标离开图片区域事件监听器
modalImage.addEventListener("mouseleave", function(event) {
  isDragging = false; // 标记结束拖动
});

//解密密碼
String fileUrl = "";
//获取根目录值
String rootPath = SysConfig.getSysConfig("UploadPath", "");;
try {
    fileUrl = request.getParameter("u").replace(" ", "+");
    fileUrl = new String(解密文件路径(fileUrl));
} catch (Exception e1) {
    Log.printLog("通知文件路径解密出错:" + Tools.toString(e1.getMessage()));
}
//将文件路径解密后,使用流的方式返回前端
Path file = Paths.get(rootPath+fileUrl);
if (Files.exists(file)) {
    byte[] fileContent = Files.readAllBytes(file);
    String base64FileContent = java.util.Base64.getEncoder().encodeToString(fileContent);
    response.getWriter().write(base64FileContent);
} else {
    response.setStatus(HttpServletResponse.SC_NOT_FOUND);
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值