Uploadify 控件上传图片 + 预览

标签：

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

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

   1，前台代码

script：

[html] view plaincopyprint?

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

[html] view plaincopyprint?

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中后台处理

[html] view plaincopyprint?

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框架中使用

[html] view plaincopyprint?

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

Uploadify 控件上传图片 + 预览

标签：

原文地址：http://www.cnblogs.com/challengeof/p/4281878.html