使用uploadify3上传图片的示例支持图片预览

首先是前端代码。

导入jquery是必须的。省略。

其次是：

   
   
<link href="/js/jquery/plugins/uploadify/uploadify.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/js/jquery/plugins/uploadify/jquery.uploadify.min.js"></script>

核心配置：

   
   
$(document).ready(function() {
			 $("#uploadify").uploadify({
	                auto           : true,
	                swf       	 : '/js/jquery/plugins/uploadify/uploadify.swf',
	                uploader       : '/register/peBzzRec_uploadFile.action',//后台处理的请求
	                queueID        : 'fileQueue',//与下面的id对应
	                buttonClass		:'btn',
	                buttonImage     : null,
	                formData        : {recid:"${rec.id}"},
	                buttonText		:'点击浏览图片',
	                //multi          : true,多文件上传
	                //'uploadLimit' 	 : 2,//允许上传文件的个数
	                //'queueSizeLimit' : 3,//同时上传的文件
	                fileTypeDesc   : '请选择图片，仅支持格式JPG,BMP,PNG,GIF，最大4M',
	                fileTypeExts 	 : '*.JPG;*.GIF;*.PNG;*.BMP;', //控制可上传文件的扩展名，启用本项时需同时声明fileDesc
	                buttonText     : '点击上传',
	                fileObjName    : 'file',//服务端File对应的名称。
			    	fileSizeLimit	 : '4MB',//文件上传的大小限制，如果是字符串单位可以是B KB MB GB，默认是0，表示无限制
			    	width			:65,
			    	height			:20,
			    	onUploadSuccess : function(file,data,response) {//上传完成时触发（每个文件触发一次
			    		if(response==true){//如果服务器返回200表示成功
			    			if(data.indexOf("#Err")==-1){//判断是否有手动抛出错误信息
				    			$("#faximage").attr("src",data+"?"+Math.random());//重新生成缩略图
				    			$("#showtrue").attr("href",data+"?"+Math.random());
				    			$$("showtrue").style.display="";
				    			$("#pic").val(data);//保存数据
				    			$("#nowpic").val("2");//表示重新上传了图片
			    			}else{
			    				//否则输出错误信息
			    				data=eval("("+data+")");
			    				artAlert(data.msg,'e');
			    			}
			    		}else{
			    			artAlert('上传失败','e');
			    		}
					},
					onUploadError : function(file,data,response) {
			    		artAlert('上传失败','e');
					}
			 	});
			});

然后下面是页面配置：

   
   
<td class="lefttd" valign="middle">
	<input name="peBzzFaxInfo.pic" value="${peBzzFaxInfo.pic}" type="hidden" id="pic" class="inputxt" nullmsg="请上传底联信息" datatype="*5-250" size="50" errormsg="请上传底联信息！" />
	<input value="1" type="hidden" id="nowpic" name="nowpic" />
	<%--存放提交之前的图片--%>
	<input name="peBzzFaxInfo.id" value="${peBzzFaxInfo.id}" type="hidden" />
	<input name="file" id="uploadify" contenteditable="false" size="30" type="file" />
	<span class="red"><a href="/cms/cjwt/232.htm" target="_blank">如何上传底联</a> </span>
	<span class="Validform_checktip">用以确认汇款信息,上传文件小于4M的JPG图片</span>
	<div id="fileQueue"></div>
</td>

最后是服务器端处理：

get/set省略。

   
   
private File file;
private String fileFileName;
private String fileContentType;

   
   
public String uploadFile() {
		JSONObject obj = new JSONObject();
		PeBzzRecruit peBzzRecruit = (PeBzzRecruit) session().getAttribute("rec");
		if (peBzzRecruit == null) {// 如果没有取到，可能是超时或者是SWF上传跨session了
			// 处理火狐浏览器跨session的问题
			// 页面传过来的sessionid从session过滤器中集合中查找查找当前session
			String recid = request().getParameter("recid");
			if (recid == null) {// 如果没有找到，超时了
				obj.put("msg", "登录超时，请退出重新登录。");
				obj.put("stat", "#Err");// 返回#Err表示服务端返回错误信息ERROR
				renderJson(obj.toString());
				return null;
			}
			DetachedCriteria peb = DetachedCriteria.forClass(PeBzzRecruit.class);
			peb.createCriteria("peBzzBatch", "peBzzBatch");
			peb.createCriteria("peEnterprise", "peEnterprise1").createCriteria("peEnterprise", "peEnterprise2").createCriteria("peEnterprise", "peEnterprise3", DetachedCriteria.LEFT_JOIN);
			peb.createCriteria("peSite", "peSite", DetachedCriteria.LEFT_JOIN);
			peb.createCriteria("ssoUser", "ssoUser");
			peb.add(Restrictions.eq("id", recid));
			List<PeBzzRecruit> recs = null;
			try {
				recs = this.getGeneralService().getDetachList(peb);
				if (recs == null || recs.size() == 0) {
					obj.put("msg", "没有找到相关用户，原因：用户信息不完整。");
					obj.put("stat", "#Err");// 返回#Err表示服务端返回错误信息ERROR
					renderJson(obj.toString());
					return null;
				}
				peBzzRecruit = recs.get(0);
			} catch (EntityException e) {
				obj.put("msg", "获取用户信息时出错。");
				obj.put("stat", "#Err");// 返回#Err表示服务端返回错误信息ERROR
				renderJson(obj.toString());
				return null;
			}
		}
		PeBzzBatch peBzzBatch = peBzzRecruit.getPeBzzBatch();
		if (peBzzBatch == null) {
			obj.put("msg", "该用户尚未分配学期！");
			obj.put("stat", "#Err");// 返回#Err表示服务端返回错误信息ERROR
			renderJson(obj.toString());
			return null;
		}
		PeEnterprise pe = peBzzRecruit.getPeEnterprise();
		if (pe == null) {
			obj.put("msg", "请先完善个人省市县信息！");
			obj.put("stat", "#Err");// 返回#Err表示服务端返回错误信息ERROR
			renderJson(obj.toString());
			return null;
		}
		String provCode = null;// 省份代号
		if (pe.getLevel() == 1) {
			provCode = pe.getCode();
		} else if (pe.getLevel() == 2) {
			provCode = pe.getPeEnterprise().getCode();
		} else if (pe.getLevel() == 3) {
			provCode = pe.getPeEnterprise().getPeEnterprise().getCode();
		}
		faxInfo();// 查询
		PeBzzFaxInfo p = this.getPeBzzFaxInfo();
		// 存放底联的文件夹：/incoming/faxinfo/批次号/省份代号
		String path = "/incoming/faxinfo/" + peBzzBatch.getBatchCode() + "/" + provCode;
		File uploadFile = getFile();
		try {
			if (uploadFile != null && !"".equals(uploadFile.getPath())) {
				String realPath = session().getServletContext().getRealPath(path);
				File dir = new File(realPath);
				if (!dir.isDirectory()) {
					dir.mkdirs();
				}
				String picname = "/" + peBzzRecruit.getSsoUser().getUserName();
				if (p == null || p.getPic() == null) {
					picname += ".JPG";// 默认以用户名为图片
				} else {
					String picpath = session().getServletContext().getRealPath(p.getPic());
					// 判断文件是否存在
					picpath = picpath.replaceAll("\\s", "");
					File picfile = new File(picpath);
					if (picfile.isFile() && picfile.exists()) {
						if (p.getPic().endsWith("@TEMP@.JPG")) {// 如果有以@TEMP@.JPG结尾的图片，就以登录名为图片，否则互斥
							picname += ".JPG";
						} else {
							picname += "@TEMP@.JPG";
						}
					} else {
						picname += ".JPG";
					}
				}
				FileInputStream fis = new FileInputStream(uploadFile);
				String filepath = dir.getAbsolutePath() + picname;
				FileOutputStream fos = new FileOutputStream(filepath);
				int i = 0;
				byte[] buf = new byte[1024];
				while ((i = fis.read(buf)) != -1) {
					fos.write(buf, 0, i);
				}
				fos.close();
				fis.close();
				picname = path + picname;
				renderJson(picname);
				return null;
			}
		} catch (Exception e) {
			obj.put("msg", "上传图片出现问题！");
			obj.put("stat", "#Err");// 返回#Err表示服务端返回错误信息ERROR
			renderJson(obj.toString());
			return null;
		}
		return null;
	}