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

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

首先是前端代码。
导入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上传图片的示例支持图片预览