本博客主要描述如何用JavaScript+java实现图片的预览功能,其实要点还是需要服务端的流。
(一)功能描述
点击页面的 【预览】 查看已经上传的或者在服务器中存在的图片。
(二)实现原理
使用img标签的src属性来渲染数据,但是,src的值是服务端返回的文件流。即是,点击【预览】按钮,跳转到预览页面,预览页面的img标签的src属性的值是经过渲染的文件流。
(三)具体的实现代码
- (1)【预览】按钮页,需要传从服务端传来的路径
<html>
<button id="yulanButton">预览</button>
<script type="text/javascript">
$(function(){
$("#yulanButton").on('click', function(){
// 打开预览页面,需要传服务器的路径(url传值,可参考我的另一篇博客《js url传参》)
window.open('./yulan.jsp?url=获取到的服务器的路径');
})
})
})
</script>
</html>
- (2) yulan.jsp 预览页面,需要连接到获取图片留的jsp
<div class="imgdiv">
<img id="imgss" src="../params/projAndDetailImg.jsp" title="在线预览">
</div>
<script type="text/javascript">
var yulanUrl = 获取到的服务器的路径
$(function(){
$("#imgss").attr('src', "../params/projAndDetailImg.jsp?photoUrl="+yulanUrl)
});
</script>
- (3) projAndDetailImg.jsp 服务端渲染页面
<%
String photoUrl=request.getParameter("photoUrl");
// photoUrl为接收到的路径
if(StringUtils.isNotBlank(photoUrl)){
File file = new File(photoUrl);
// File file=new File(photoUrl);
if (file.exists()) {
try (FileInputStream fis = new FileInputStream(file);
BufferedInputStream bis = new BufferedInputStream(fis, 1024);
ByteArrayOutputStream bos = new ByteArrayOutputStream(1024);) {
byte[] cache = new byte[1024];
int length = 0;
while ((length = bis.read(cache)) != -1) {
bos.write(cache, 0, length);
}
/**
return bos.toByteArray();
BASE64Encoder encoder = new BASE64Encoder();
return encoder.encode(bos.toByteArray());
**/
response.getOutputStream().write(bos.toByteArray());
}
}
}
%>
ok !!!
图片在先预览功能相对于前端来说,不是有多复杂,只需要一个img标签即可,但是需要我们在jsp页面经过<%%>服务端渲染出一个文件路径流,方能访问到该图片地址。
方法,千千万,这只是其一。
https://github.com/mcya/JavaScriptExperience/issues