浏览器预览图片功能

     在工作中遇到过关于IE浏览器对图片预览兼容性问题，现写一下记录。

     在IE6版本中支持jsp中的img标签的src属性直接引用本地图片资源，但IE7或更高浏览器版本中，为了个人电脑资料的安全性考虑，浏览器屏蔽了预览功能！为了在不同浏览器版本下都能实现预览功能，一种办法如下：

     数据库端：

     第一：在数据库表中建立一张与业务相关联的图片表和一张上传图片的中间表。

     第二：建立一个数据库JOB，定期清除中间表中的图片信息。

     应用端：

     在页面中提供上传图片到中间表中的功能，上传成功后调用jsp中的js代码实现对图片的预览功能。

        jsp页面中上传图片代码参考：

function upload(){
	$.funkyUI({

		title:"上传图片",        //标题

		showButtonRow:false,    //不显示按钮

		url:"${root}/testUpLoad/upload.jsp",  	//打开的子页面的URL

		callback:callBack,  //挂事件,可以在子页面中用$.callback()方法执行父页面中的函数

		OKEvent:null,  //挂事件，当点击子页面的确定时，执行父页面的okEvent函数

		css:{width:"500",height:"250"}  //宽与高
	});
}
//回调函数
function callBack(){
	document.getElementById("zp").value=arguments[0];
	$("#img").attr("src",'$(root)test/show?imgId='+arguments[0]);
}
------------------------------------------页面上传--------------------------------------------
<TR>
	<td >尸体照片</td>
	<td colspan="5">
		<input type="hidden" name="zp" id="zp"/>
		 <a href="javascript:upload();" title="上传图片"><img id="img" src="${root}/images/nophoto.jpg" style="WIDTH: 250px; HEIGHT: 175px" ></a>
	</td>
</TR>	
--------------------------------------------------------------------------------------

    

上传图片到中间表的java代码参考：

@RequestMapping("/upload")
public void upload(HttpServletRequest request, HttpServletResponse response) {
	Info info = (Info) request.getSession().getAttribute("info");
	DiskFileItemFactory factory = new DiskFileItemFactory();
	ServletFileUpload upload = new ServletFileUpload(factory);
	StringBuffer saveFileName = new StringBuffer();
	StringBuffer sbf = new StringBuffer();
	List<FileItem> list;
	try {
		list = upload.parseRequest(request);
		for (FileItem item : list) {
			if (!item.isFormField()) {
				String name = item.getName();
				saveFileName.append(name);
				byte[] bin = item.get();
				if (bin.length > 300 * 1024) {
					request.setAttribute("errMsg", "上传文件不可大于300K字节");
					request.getRequestDispatcher("/testUpLoad/upload.jsp")
							.forward(request, response);
					return;
				}

				if (!("".equals(name) || bin.length == 0)) {
					super.logDao.save(info, "上传文件", "上传文件：{" + name
							+ "} 文件大小：{" + bin.length + "}");
					String zpid = super.testDao.upload(bin);
					sbf.append(zpid);
					sbf.append(",");
				}
			}
		}
		String pk = "";
		if (sbf.length() > 1 && sbf.lastIndexOf(",") == sbf.length() - 1) {
			pk = sbf.substring(0, sbf.length() - 1);
		} else {
			pk = sbf.toString();
		}
		if ("".equals(pk) || null == pk) {
			request.setAttribute("errMsg", "请选择文件");
			request.getRequestDispatcher("/testUpLoad/upload.jsp").forward(
					request, response);
		} else {
			request.setAttribute("imgID", pk);
			request.getRequestDispatcher("/testUpLoad/uploadSuccess.jsp")
					.forward(request, response);
		}
	} catch (Exception e) {
		super.logDao.save(info, "失败！", "上传文件失败！");
		e.printStackTrace();
	}
}

     预览中间表图片的java代码参考：

@RequestMapping("/show")
public void show(HttpServletRequest request, HttpServletResponse response) {
	String imgId = R.get("imgId");// 图片ID
	BLOB blob = super.testDao.findZp(imgId);
	if (blob != null) {
		// 得到java.sql.Blob对象后强制转换为oracle.sql.BLOB
		response.setContentType("image/jpeg");
		response.setHeader("Pragma", "No-cache");
		response.setHeader("Cache-Control", "no-cache");
		response.setDateHeader("Expires", 0);
		ServletOutputStream out;
		try {
			out = response.getOutputStream();
			out.write(blob.getBytes(1, (int) blob.length()));
			out.flush();
			out.close();
		} catch (Exception e) {
			super.logDao.save(info, "失败！", "读取文件失败！");
			e.printStackTrace();
		}
	}
}

  其它代码参考附件!