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

约定不等于承诺〃 2022-08-12 01:05 299阅读 0赞

首先是前端代码。

导入jquery是必须的。省略。

其次是：

核心配置：

$(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;
         }