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，实现的效果图如下：