Uploadify 控件上传图片 + 预览

 jquery的Uploadify控件上传图片和预览使用介绍。

   在简单的servlet系统中和在SSH框架中,后台处理不同的,在三大框架中图片预览时费了不少力气,所以下面将两种情况都介绍一下。

   1,前台代码

script:

 

  1. $("#uploadify").uploadify({  
  2.     'langFile'       : '<%=request.getContextPath()%>/config/juploadify/uploadifyLang_cn.js',  
  3.     'swf'            : '<%=request.getContextPath()%>/config/juploadify/uploadify.swf',  
  4.     'uploader'       : '<%=request.getContextPath()%>/UploadAction/uploadImg.action', //图片上传的action方法  
  5.     'queueID'        : 'fileQueue',  
  6.     'auto'           : true,  
  7.     'multi'          : true,  
  8.     'buttonCursor'   : 'hand',  
  9.     'fileObjName'    : 'uploadify',  
  10.     'buttonText'     : '上传图片',  
  11.     'height'         : '25',  
  12.     'progressData'   : 'percentage',  
  13.     'fileTypeDesc'   : '支持格式:jpg/gif/jpeg/png/bmp.',    
  14.     'fileTypeExts': '*.jpg;*.gif;*.jpeg;*.png;*.bmp',//允许的格式  
  15.     onUploadSuccess  : function(file,data,response) {  
  16.         //设置图片预览  
  17.         var _arr_val = data.split(",");  
  18.         $("#photo").val(_arr_val[1]);  
  19.         $("#pic_view").attr("src","<%=request.getContextPath()%>" + _arr_val[1]);  
  20.     }  
  21. });  

html

 

 

  1. <td width="15%" rowspan="9" align="center">  
  2.     <div id="fileQueue" style="width:200px;"></div>   
  3.     <input type="file" name="uploadify" id="uploadify" />   
  4.     <input type="hidden" name="photo" id="photo" value="">  
  5.     <div id="pic_view_div" style="width:150px; height:180px">  
  6.          <img src="<%=request.getContextPath()%>/image/nopic.gif" width="150" height="180" id="pic_view">  
  7.     </div>  
  8. </td>  

   2,servlet中后台处理

 

 

  1. public void uploadImg(){  
  2.     // 解决服务器端消息返回客户端后中文字符乱码  
  3.     response.setHeader("Content-Type", "text/html;charset=UTF-8");  
  4.     HttpSession session = request.getSession();  
  5.     PrintWriter outs = response.getWriter();  
  6.   
  7.     //获取上传图片的路径  
  8.     String savePath = request.getSession().getServletContext().getRealPath("");  
  9.     String saveDirectory = savePath + "/Imgupload";  
  10.     File file = new File(saveDirectory);  
  11.     if (!file.exists()) {  
  12.         file.mkdirs();  
  13.     }  
  14.   
  15.     //设置图片大小  
  16.     if (StringUtils.isBlank(this.fileSizeLimit.toString())) {  
  17.         this.fileSizeLimit = "100";// 默认100M  
  18.     }  
  19.     int maxPostSize = Integer.valueOf(this.fileSizeLimit).intValue() * 1024 * 1024;  
  20.   
  21.     String encoding = "UTF-8";  
  22.     MultipartRequest multi = null;  
  23.     try {  
  24.         multi = new MultipartRequest(request, saveDirectory, maxPostSize, encoding);  
  25.     } catch (Exception e) {  
  26.         System.out.println("发生异常:" + e.getMessage());  
  27.         return;  
  28.     }  
  29.   
  30.     //图片预览功能实现  
  31.     String _result = "";  
  32.     Enumeration files = multi.getFileNames();  
  33.     while (files.hasMoreElements()) {  
  34.         String name = (String) files.nextElement();  
  35.         File f = multi.getFile(name);  
  36.         if (f != null) {  
  37.             String fileName = multi.getFilesystemName(name);  
  38.             String lastFileName = saveDirectory + "/" + fileName;  
  39.             result += multi.getOriginalFileName(name) + "," + savePath + "/" + fileName;  
  40.         }  
  41.     }  
  42.   
  43.     outs.print(_result);  
  44. }  

注意:action方法返回的字符串为图片的名称和图片的路径。

 

 

     3,SSH框架中使用

     

  1. package cn.com.zzcy.base.action;  
  2.   
  3. import java.io.File;  
  4.   
  5. @Namespace("/UploadAction")  
  6. public class UploadAction {  
  7.     private File uploadify;  
  8.     public File getUploadify() {  
  9.         return uploadify;  
  10.     }  
  11.     public void setUploadify(File uploadify) {  
  12.         this.uploadify = uploadify;  
  13.     }  
  14.     private String uploadifyFileName;  
  15.     public String getUploadifyFileName() {  
  16.         return uploadifyFileName;  
  17.     }  
  18.     public void setUploadifyFileName(String uploadifyFileName) {  
  19.         this.uploadifyFileName = uploadifyFileName;  
  20.     }  
  21.   
  22.     /**  
  23.      * 上传图片  
  24.      * @throws IOException   
  25.      */  
  26.     @Action("uploadImg")  
  27.     public void uploadImg(){  
  28.         HttpServletRequest request = ServletActionContext.getRequest();  
  29.         HttpServletResponse response = ServletActionContext.getResponse();  
  30.         String savePath = request.getSession().getServletContext().getRealPath("");  
  31.         PrintWriter out = null;  
  32.         String resultStr = "";  
  33.         String extName = "";// 扩展名  
  34.         String newFileName = "";// 新文件名  
  35.         try {  
  36.             response.setCharacterEncoding("utf-8");  
  37.             out = response.getWriter();  
  38.               
  39.             //获取文件的扩展名  
  40.             if (uploadifyFileName.lastIndexOf(".") >= 0) {  
  41.                 extName = uploadifyFileName.substring(uploadifyFileName.lastIndexOf("."));  
  42.             }  
  43.             //根据当前时间生成新的文件名称  
  44.             String nowTime = new SimpleDateFormat("yyyymmddHHmmss").format(new Date());// 当前时间  
  45.             newFileName = nowTime + extName;  
  46.               
  47.             //设置文件保存路径  
  48.             String param = request.getParameter("param");  
  49.             savePath = savePath + "/ImgUpload/"+param+"/";  
  50.             File file = new File(savePath);  
  51.             if(!file.exists()){  
  52.                 file.mkdirs();  
  53.             }  
  54.             uploadify.renameTo(new File(savePath+newFileName));  
  55.             resultStr = uploadifyFileName+","+"/ImgUpload/"+param+"/"+newFileName;  
  56.         } catch (IOException e) {  
  57.             e.printStackTrace();  
  58.         }finally{  
  59.             out.print(resultStr);  
  60.         }  
  61.     }  
  62.               
  63. }  

 

     注意:要定义局部变量并提供set方法,这样图片的名称和信息才能自动注入进入。

     这里通过request方法获取不到图片信息。。。

            
     4,实现的效果图如下:

     

原文出自:http://blog.csdn.net/lishuangzhe7047/article/details/41803175

posted @ 2015-02-09 16:42  石頭剪刀b  阅读(376)  评论(0编辑  收藏  举报