支持IE8的图片在线浏览插件（支持滚轮放大缩小）（IE9+支持滚轮放大缩小、旋转、全屏）

最新推荐文章于 2021-06-04 13:24:01 发布

程序猿哒哒哒

最新推荐文章于 2021-06-04 13:24:01 发布

阅读量706

点赞数

分类专栏：工具类文章标签：图片在线预览支持ie8

本文链接：https://blog.csdn.net/weixin_40845192/article/details/104655143

版权

工具类专栏收录该内容

7 篇文章 0 订阅

订阅专栏

参考：https://www.17sucai.com/preview/776331/2017-12-27/magnify/index.html

1、前台 js css下载路径https://github.com/thdoan/magnify

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Magnify demo</title>
    <link rel="stylesheet" href="${ctx}/static/common/magnify/css/jquery.magnify.css">
	<link rel="stylesheet" href="${ctx}/static/common/magnify/css/font-awesome.min.css">
	<script type="text/javascript" src="${ctx}/static/jquery.min.js"></script>
	<script type="text/javascript" src="${ctx}/static/common/magnify/js/jquery.magnify.js"></script>
</head>

<body>
   <div class="image-set" hidden="hidden">
        
   </div>  
</body>

2、js

/**
*图片预览
*@param id 图片存储后台id
*@param fileName 标题
*/
function picView(id,fileName){
	window.prettyPrint && prettyPrint();
	var magnify = $('[data-magnify=gallery]').magnify();//.magnify(option); option可配置参数参考上链接
	$(".image-set").empty();//每次进来都清空div
	//可有多个图片循环查看
	var preView = "<a id='"+id+"' data-magnify='gallery' data-src='' 
		data-caption='"+fileName+"' data-group='a' 
		href='${ctx}/httz/download?id="+id+"'></a>"
	$(".image-set").append(preView);
	$("#"+id).click();
}

3、后端

private static final String fileName="文件名";
private static final String contentType="image/jpeg";//文档内容【image/jpeg、image/bmp、image/png、image/gif】
private static final String BASE_PATH="C:\\image\\";//文件名存放路径
/**
 * 下载
 * @param request
 * @param response
 * @return 
 * @throws IOException
 */
@RequestMapping(value = "download")
public String download(HttpServletRequest request, HttpServletResponse response, Model model){
	String fullPath  = BASE_PATH + fileName;
	BufferedInputStream bis = null;
	BufferedOutputStream bos = null;
	OutputStream fos = null;
	InputStream fis = null;
	try {
		if (request.getHeader("User-Agent").toLowerCase().indexOf("firefox") > 0){
			fileName = new String(fileName.getBytes("UTF-8"), "ISO8859-1");//firefox浏览器
		}else if(request.getHeader("User-Agent").toUpperCase().indexOf("MSIE") > 0){
				fileName = URLEncoder.encode(fileName, "utf-8");//IE浏览器
		}else {
			fileName = URLEncoder.encode(fileName, "utf-8");
		}
		response.reset();
		response.setContentType(StringUtils.isNotBlank(contentType) ? contentType
				: "application/octet-stream");
		response.setHeader("Content-Disposition", "attachment; filename=" + fileName);
		fis = new FileInputStream(fullPath);
		bis = new BufferedInputStream(fis);
		fos = response.getOutputStream();
		bos = new BufferedOutputStream(fos);
		int bytesRead = 0;
		byte[] buffer = new byte[5 * 1024];
		  while ((bytesRead = bis.read(buffer)) != -1) {
			 bos.write(buffer, 0, bytesRead);// 将文件发送到客户端
		  }
	} catch (IOException e) {
		e.printStackTrace();
	} finally {
		if(bos != null) {
			try {
				bos.close();
			} catch (IOException e) {
				e.printStackTrace();
			}
		}
		if(bis != null) {
			try {
				bis.close();
			} catch (IOException e) {
				e.printStackTrace();
			}
		}
		if(fos != null) {
			try {
				fos.close();
			} catch (IOException e) {
				e.printStackTrace();
			}
		}
		if(fis != null) {
			try {
				fis.close();
			} catch (IOException e) {
				e.printStackTrace();
			}
		}
	}
	return null;
}

4、效果（chrome下可放大缩小支持滚轮、可全屏、可旋转 ie下不支持全屏 ie9以下不支持旋转）

程序猿哒哒哒

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
支持IE8的图片在线浏览插件（支持滚轮放大缩小）（IE9+支持滚轮放大缩小、旋转、全屏）

参考：https://www.17sucai.com/preview/776331/2017-12-27/magnify/index.html1、前台 js css下载路径https://github.com/thdoan/magnify<head> <meta charset="utf-8"> <meta http-equiv="X-UA-...
复制链接

扫一扫