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

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文件夹下面。