js实现图片在线预览

最新推荐文章于 2025-03-05 16:08:04 发布

原创最新推荐文章于 2025-03-05 16:08:04 发布 · 1.3k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#js实现图片在线预览

js在线预览专栏收录该内容

2 篇文章

订阅专栏

该博客介绍了如何利用JavaScript实现图片的在线预览功能，包括代码展示和实际效果的预览。

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" onchange="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 }" onclick="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>