正文 

当前位置： 首页 > 知识 > java教程

js实现图片在线预览(代码片段)

八月长安个人专栏 八月长安个人专栏     2022-12-06     796

关键词：

js在线预览图片

  一、效果预览



二、实现代码：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>js图片在线预览</title>
<script language=javascript>
 function viewPic(obj)
		var fileUrl=$(obj).attr("fileUrl");
		var title=$(obj).attr("title");
		$("#pic").attr("src",fileUrl);
		$("#pictitle").html(title);
	
</script>
</head>
<body>
<input type="file" οnchange="previewFile()"><br>
<img src="" height="200" width="300" alt="Image preview..."/>
<div class="row">
<c:forEach items="$fileList " var="file" varStatus="status">
 <div class="row" id="div$status.index+1 ">
   <div class="col-md-4">
	 <div class="form-group" >
		<label class="control-label col-md-4" style="font-weight:bold;padding-top:0px;">$status.index+1 .</label>
		  <c:choose>
			  <c:when test="$file.suffix == '.JPG' ||  file.suffix == '.bmp' || file.suffix == '.png'|| file.suffix == '.gif'  || file.suffix == '.jpeg'|| file.suffix == '.pjpeg'|| file.suffix == '.jpg'">
				$file.fileName    <a title="$file.fileName " οnclick="viewPic(this)" data-toggle='modal' data-target='#large_pic' fileUrl="<%=baseUrl %>uploadfiles/$file.fileUrl " target=_blank>查看</a>
			  </c:when>
			  <c:otherwise>
				无效文件
			  </c:otherwise> 
			</c:choose>
	 </div>
	</div>
 </div>
 </c:forEach>
 </div>
 
<!-- Modal 弹出框-->
<div class="modal fade bs-modal-lg in"  id="large_pic" tabindex="-1" data-backdrop="static" data-keyboard="false" role="dialog" aria-hidden="false" >
	<div class="modal-dialog modal-lg">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
				<h3 class="modal-title" id="pictitle"></h3>
			</div>
			<div class="modal-body">
				<img src="" id="pic" style="width: 870px;">	
			</div>
		</div>
	</div>
</div>
</body>
</html>


实现ppt在线预览，ppt转图片方案(代码片段)

PPT转图片方案：已放弃方案：poi（失真度太高）；Aspose直接转图片（收费，效果较好，备选）；微软OfficeOnline（需要基于Windows部署）；officeweb365（收费，效果可以，公有云服务）；永中DCS（收费，效果不是很好）；docsplit（命令... 查看详情

js在线预览pdf文件(代码片段)

js在线预览PDF文件 一、效果预览二、实现代码：<html><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/><title>js图片在线预览</title><scriptsrc="$pageContext.request.contextPath/js/p... 查看详情

js在线预览pdf文件(代码片段)

js在线预览PDF文件 一、效果预览二、实现代码：<html><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/><title>js图片在线预览</title><scriptsrc="$pageContext.request.contextPath/js/p... 查看详情

javascript实现wordexcelppt在线预览(代码片段)

  在项目中前端需要根据后台返回的文件地址实现在线预览，图片、视频、pdf等格式的文件用window.open(url)或window.location.href=url能够实现在线预览，但Word、Excel、PPT文档用同样的方式打开则是默认下载。  微软office... 查看详情

在线问题反馈模块实战​:实现图片预览功能(代码片段)

👨‍🎓作者：bug菌✏️博客：CSDN、掘金等💌公众号：猿圈奇妙屋🚫特别声明：原创不易，转载请附上原文出处链接和本文声明，谢谢配合。🙏版权声明：文章里可能部分文字或者... 查看详情

在线问题反馈模块实战​:实现图片预览功能(代码片段)

👨‍🎓作者：bug菌✏️博客：CSDN、掘金等💌公众号：猿圈奇妙屋🚫特别声明：原创不易，转载请附上原文出处链接和本文声明，谢谢配合。🙏版权声明：文章里可能部分文字或者... 查看详情

实现在线预览pdf的几种解决方案(代码片段)

原文:实现在线预览PDF的几种解决方案因客户需要实现PDF的预览处理，在网上找了一些PDF在线预览的解决方案，有的用PDFJS的在线预览方式，有的使用PDFObject的嵌入式显示，有的通过转换JPG/PNG方式实现间接显示的方式，开始是想... 查看详情

pdf.js实现图片在线预览

 项目需求　　前段时间项目中遇到了一个模块，是关于在线预览word文档（PDF文件）的，所以，找了很多插件，例如，pdf.js，pdfobject.js框架，但是pdfobject.js框架对于IE浏览器不兼容，所以，选择了使用pdf.js，这里记录一下，以... 查看详情

原生js和css实现点击图片预览放大(代码片段)

效果：代码实现，可以直接复制到本地测试（把图片路径换一下）<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>3.图片预览</title><st 查看详情

javascript实现wordexcelppt在线预览(代码片段)

  在项目中前端需要根据后台返回的文件地址实现在线预览，图片、视频、pdf等格式的文件用window.open(url)或window.location.href=url能够实现在线预览，但Word、Excel、PPT文档用同样的方式打开则是默认下载。  微软office... 查看详情

js的dom操作之js实现图片预览功能，手机端电脑端通用(代码片段)

...想做搬运工】前端用的layui，连个可连续预览图片的实现办法都没有，那么只得自己写代码了。【思路】电脑端效果：手机端效果：实现的方式就是，传入一个图片路径数组和当前预览图片的id（或索引值&#... 查看详情

springboot+vue+kkfileview实现文档管理(文档上传下载在线预览)(代码片段)

场景SpringBoot+Vue+OpenOffice实现文档管理(文档上传、下载、在线预览)：SpringBoot+Vue+OpenOffice实现文档管理(文档上传、下载、在线预览)_霸道流氓气质的博客-CSDN博客_vueopenoffice上面在使用OpenOffice实现doc、excel、ppt等文... 查看详情

使用input选择本地图片，并且实现预览功能(代码片段)

...选择本地图片文件用一个盒子来存放预览的图片 2、JS实现预览 首先添加一个inputchange事件，再用到 URL.createObjectURL()方法 用来创建URL的 File 对象或者 Blob 对象? 这时候就能可以选择图片然后在你... 查看详情

springboot实现office各种格式在线预览（详细教程，包教包会）(代码片段)

点击关注公众号，实用技术文章及时了解项目特性部署过程2.1二进制下载部署文件进行部署2.2docker方式部署2.3通过源代码编绎部署部分配置说明3.1server.context-path预览乱码字体问题预览展示附件其他说明7.1使用openoffice进行转... 查看详情

ios开发漫话wkwebview之给h5网页图片添加点击事件以实现原生图片预览(代码片段)

   这是漫画WKWebView的续篇。在此文中主要是实现给WKWebView注入Js实现点击图片预览的需求。话不多说先看下成品效果：实现这个需求无疑就是实现Js与WKWebView交互操作，包括传值和相互调用。这个话题网络上有成堆的文... 查看详情

vue使用vue-pdf实现pdf在线预览(代码片段)

....js这个库，这当然没什么问题，pdf.js的确可以非常完美的实现pdf在线预览的过程，但是感觉这样直接进去有点不太优雅，于是找找看看有没有什么现成的组件，发现有vue-pdf这个组件，虽然说它没有原生那样强大，比如不支持pdf... 查看详情

js实现的图片预览功能

之前的博文有实现过图片上传预览，但那种方法是预览时就将图片上传，会产生很大的浪费空间。找到了之前有人写的用JS实现的图片预览，就说用js将上传的图片显示，上传代码在之前的博文中有写到。以下是实现的代码：body... 查看详情

java中如何实现文件预览的功能(代码片段)

...xff0c;txt，图片等。pdf，Html，txt，图片这种实现在线预览非常简单，有一些前端的插件可以满足要求。word，Excel，PPT如果要实现在线预览，就非常的困难。word，Excel，PPT实现在线预览常用的方... 查看详情