上传图片预览（服务器版）组件

最新推荐文章于 2025-11-24 14:38:27 发布

最新推荐文章于 2025-11-24 14:38:27 发布 · 161 阅读

文章标签：

#java #web.xml #javascript #ViewUI

Java 同时被 2 个专栏收录

19 篇文章

订阅专栏

TOOLS

2 篇文章

订阅专栏

介绍了一个图片上传预览组件的实现方法，通过配置Servlet及引入特定JS文件，实现在网页上实时预览用户上传的图片。

preview v0.1.0 初始版本

图片上传预览图片组件。

先来个效果看看：

使用步骤：

1.在web.xml中配置selvelt如下所示

 <servlet>
    <description>上传图片预览</description>
    <display-name>PreviewServlet</display-name>
    <servlet-name>PreviewServlet</servlet-name>
    <servlet-class>com.zohan.www.preview.PreviewServlet</servlet-class>
  </servlet>
  <servlet-mapping>
    <servlet-name>PreviewServlet</servlet-name>
    <url-pattern>/servlet/previewServlet/*</url-pattern>
  </servlet-mapping>

2.在自己的页面（jsp/html）加载js文件如下所示：

<script src="./servlet/previewServlet/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="./servlet/previewServlet/jquery.form.js" type="text/javascript"></script>
<script src="./servlet/previewServlet/zohan.preview.js" type="text/javascript"></script>

图片预览的位置，可以任意的定制，包括样式

<fieldset>
	<legend>上传图片显示</legend>
	<div id ="" style ="width: 200;height: 150"><img id ="showimg" width="200" height="150" src="default.jpg"></div>	
</fieldset>

调用现实图片js

<script type="text/javascript">
	var fileup = new ajaxFileUpload({
		callBack : function(data) {
			 //alert(data);
			 var img = document.getElementById("showimg");
			img.src="./servlet/previewServlet?iamgeid="+data.id;//获取 图片显示	
			//alert(data.name);//图片的实际名称
		},
		url : "./servlet/previewServlet"  //图片临时上传 路径
	});
	fileup.createConner();//初始化页面
</script>

3.把previewv0.1.0.jar添加到WEB-INF/lib文件夹下面。