首页 > 代码库 > 使用uploadify3上传图片的示例支持图片预览

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

2024-07-22 01:11:01   222人阅读

首先是前端代码。
导入jquery是必须的。省略。
其次是：
  1. <link href="/js/jquery/plugins/uploadify/uploadify.css" rel="stylesheet" type="text/css" />
  2. <script type="text/javascript" src="/js/jquery/plugins/uploadify/jquery.uploadify.min.js"></script>
核心配置：
  1. $(document).ready(function() {
  2. 			 $("#uploadify").uploadify({
  3. 	                auto           : true,
  4. 	                swf       	 : ‘/js/jquery/plugins/uploadify/uploadify.swf‘,
  5. 	                uploader       : ‘/register/peBzzRec_uploadFile.action‘,//后台处理的请求
  6. 	                queueID        : ‘fileQueue‘,//与下面的id对应
  7. 	                buttonClass		:‘btn‘,
  8. 	                buttonImage     : null,
  9. 	                formData        : {recid:"${rec.id}"},
  10. 	                buttonText		:‘点击浏览图片‘,
  11. 	                //multi          : true,多文件上传
  12. 	                //‘uploadLimit‘ 	 : 2,//允许上传文件的个数
  13. 	                //‘queueSizeLimit‘ : 3,//同时上传的文件
  14. 	                fileTypeDesc   : ‘请选择图片，仅支持格式JPG,BMP,PNG,GIF，最大4M‘,
  15. 	                fileTypeExts 	 : ‘*.JPG;*.GIF;*.PNG;*.BMP;‘, //控制可上传文件的扩展名，启用本项时需同时声明fileDesc
  16. 	                buttonText     : ‘点击上传‘,
  17. 	                fileObjName    : ‘file‘,//服务端File对应的名称。
  18. 			    	fileSizeLimit	 : ‘4MB‘,//文件上传的大小限制，如果是字符串单位可以是B KB MB GB，默认是0，表示无限制
  19. 			    	width			:65,
  20. 			    	height			:20,
  21. 			    	onUploadSuccess : function(file,data,response) {//上传完成时触发（每个文件触发一次
  22. 			    		if(response==true){//如果服务器返回200表示成功
  23. 			    			if(data.indexOf("#Err")==-1){//判断是否有手动抛出错误信息
  24. 				    			$("#faximage").attr("src",data+"?"+Math.random());//重新生成缩略图
  25. 				    			$("#showtrue").attr("href",data+"?"+Math.random());
  26. 				    			$$("showtrue").style.display="";
  27. 				    			$("#pic").val(data);//保存数据
  28. 				    			$("#nowpic").val("2");//表示重新上传了图片
  29. 			    			}else{
  30. 			    				//否则输出错误信息
  31. 			    				data=eval("("+data+")");
  32. 			    				artAlert(data.msg,‘e‘);
  33. 			    			}
  34. 			    		}else{
  35. 			    			artAlert(‘上传失败‘,‘e‘);
  36. 			    		}
  37. 					},
  38. 					onUploadError : function(file,data,response) {
  39. 			    		artAlert(‘上传失败‘,‘e‘);
  40. 					}
  41. 			 	});
  42. 			});
然后下面是页面配置：
  1. <td class="lefttd" valign="middle">
  2. 	<input name="peBzzFaxInfo.pic" value="${peBzzFaxInfo.pic}" type="hidden" id="pic" class="inputxt" nullmsg="请上传底联信息" datatype="*5-250" size="50" errormsg="请上传底联信息！" />
  3. 	<input value="1" type="hidden" id="nowpic" name="nowpic" />
  4. 	<%--存放提交之前的图片--%>
  5. 	<input name="peBzzFaxInfo.id" value="${peBzzFaxInfo.id}" type="hidden" />
  6. 	<input name="file" id="uploadify" contenteditable="false" size="30" type="file" />
  7. 	<span class="red"><a href="/cms/cjwt/232.htm" target="_blank">如何上传底联</a> </span>
  8. 	<span class="Validform_checktip">用以确认汇款信息,上传文件小于4M的JPG图片</span>
  9. 	<div id="fileQueue"></div>
  10. </td>
最后是服务器端处理：
get/set省略。
  1. private File file;
  2. private String fileFileName;
  3. private String fileContentType;

  1. public String uploadFile() {
  2. 		JSONObject obj = new JSONObject();
  3. 		PeBzzRecruit peBzzRecruit = (PeBzzRecruit) session().getAttribute("rec");
  4. 		if (peBzzRecruit == null) {// 如果没有取到，可能是超时或者是SWF上传跨session了
  5. 			// 处理火狐浏览器跨session的问题
  6. 			// 页面传过来的sessionid从session过滤器中集合中查找查找当前session
  7. 			String recid = request().getParameter("recid");
  8. 			if (recid == null) {// 如果没有找到，超时了
  9. 				obj.put("msg", "登录超时，请退出重新登录。");
  10. 				obj.put("stat", "#Err");// 返回#Err表示服务端返回错误信息ERROR
  11. 				renderJson(obj.toString());
  12. 				return null;
  13. 			}
  14. 			DetachedCriteria peb = DetachedCriteria.forClass(PeBzzRecruit.class);
  15. 			peb.createCriteria("peBzzBatch", "peBzzBatch");
  16. 			peb.createCriteria("peEnterprise", "peEnterprise1").createCriteria("peEnterprise", "peEnterprise2").createCriteria("peEnterprise", "peEnterprise3", DetachedCriteria.LEFT_JOIN);
  17. 			peb.createCriteria("peSite", "peSite", DetachedCriteria.LEFT_JOIN);
  18. 			peb.createCriteria("ssoUser", "ssoUser");
  19. 			peb.add(Restrictions.eq("id", recid));
  20. 			List<PeBzzRecruit> recs = null;
  21. 			try {
  22. 				recs = this.getGeneralService().getDetachList(peb);
  23. 				if (recs == null || recs.size() == 0) {
  24. 					obj.put("msg", "没有找到相关用户，原因：用户信息不完整。");
  25. 					obj.put("stat", "#Err");// 返回#Err表示服务端返回错误信息ERROR
  26. 					renderJson(obj.toString());
  27. 					return null;
  28. 				}
  29. 				peBzzRecruit = recs.get(0);
  30. 			} catch (EntityException e) {
  31. 				obj.put("msg", "获取用户信息时出错。");
  32. 				obj.put("stat", "#Err");// 返回#Err表示服务端返回错误信息ERROR
  33. 				renderJson(obj.toString());
  34. 				return null;
  35. 			}
  36. 		}
  37. 		PeBzzBatch peBzzBatch = peBzzRecruit.getPeBzzBatch();
  38. 		if (peBzzBatch == null) {
  39. 			obj.put("msg", "该用户尚未分配学期！");
  40. 			obj.put("stat", "#Err");// 返回#Err表示服务端返回错误信息ERROR
  41. 			renderJson(obj.toString());
  42. 			return null;
  43. 		}
  44. 		PeEnterprise pe = peBzzRecruit.getPeEnterprise();
  45. 		if (pe == null) {
  46. 			obj.put("msg", "请先完善个人省市县信息！");
  47. 			obj.put("stat", "#Err");// 返回#Err表示服务端返回错误信息ERROR
  48. 			renderJson(obj.toString());
  49. 			return null;
  50. 		}
  51. 		String provCode = null;// 省份代号
  52. 		if (pe.getLevel() == 1) {
  53. 			provCode = pe.getCode();
  54. 		} else if (pe.getLevel() == 2) {
  55. 			provCode = pe.getPeEnterprise().getCode();
  56. 		} else if (pe.getLevel() == 3) {
  57. 			provCode = pe.getPeEnterprise().getPeEnterprise().getCode();
  58. 		}
  59. 		faxInfo();// 查询
  60. 		PeBzzFaxInfo p = this.getPeBzzFaxInfo();
  61. 		// 存放底联的文件夹：/incoming/faxinfo/批次号/省份代号
  62. 		String path = "/incoming/faxinfo/" + peBzzBatch.getBatchCode() + "/" + provCode;
  63. 		File uploadFile = getFile();
  64. 		try {
  65. 			if (uploadFile != null && !"".equals(uploadFile.getPath())) {
  66. 				String realPath = session().getServletContext().getRealPath(path);
  67. 				File dir = new File(realPath);
  68. 				if (!dir.isDirectory()) {
  69. 					dir.mkdirs();
  70. 				}
  71. 				String picname = "/" + peBzzRecruit.getSsoUser().getUserName();
  72. 				if (p == null || p.getPic() == null) {
  73. 					picname += ".JPG";// 默认以用户名为图片
  74. 				} else {
  75. 					String picpath = session().getServletContext().getRealPath(p.getPic());
  76. 					// 判断文件是否存在
  77. 					picpath = picpath.replaceAll("\\s", "");
  78. 					File picfile = new File(picpath);
  79. 					if (picfile.isFile() && picfile.exists()) {
  80. 						if (p.getPic().endsWith("@TEMP@.JPG")) {// 如果有以@TEMP@.JPG结尾的图片，就以登录名为图片，否则互斥
  81. 							picname += ".JPG";
  82. 						} else {
  83. 							picname += "@TEMP@.JPG";
  84. 						}
  85. 					} else {
  86. 						picname += ".JPG";
  87. 					}
  88. 				}
  89. 				FileInputStream fis = new FileInputStream(uploadFile);
  90. 				String filepath = dir.getAbsolutePath() + picname;
  91. 				FileOutputStream fos = new FileOutputStream(filepath);
  92. 				int i = 0;
  93. 				byte[] buf = new byte[1024];
  94. 				while ((i = fis.read(buf)) != -1) {
  95. 					fos.write(buf, 0, i);
  96. 				}
  97. 				fos.close();
  98. 				fis.close();
  99. 				picname = path + picname;
  100. 				renderJson(picname);
  101. 				return null;
  102. 			}
  103. 		} catch (Exception e) {
  104. 			obj.put("msg", "上传图片出现问题！");
  105. 			obj.put("stat", "#Err");// 返回#Err表示服务端返回错误信息ERROR
  106. 			renderJson(obj.toString());
  107. 			return null;
  108. 		}
  109. 		return null;
  110. 	}

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


联系
我们