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. String savePath = request.getSession().getServletContext().getRealPath("");
8. String saveDirectory = savePath + "/Imgupload";
9. File file = new File(saveDirectory);
10. if (!file.exists()) {
11. file.mkdirs();
12. }
13. //设置图片大小
14. if (StringUtils.isBlank(this.fileSizeLimit.toString())) {
15. this.fileSizeLimit = "100";// 默认100M
16. }
17. int maxPostSize = Integer.valueOf(this.fileSizeLimit).intValue() * 1024 * 1024;
18. String encoding = "UTF-8";
19. MultipartRequest multi = null;
20. try {
21. multi = new MultipartRequest(request, saveDirectory, maxPostSize, encoding);
22. } catch (Exception e) {
23. System.out.println("发生异常：" + e.getMessage());
24. return;
25. }
26. //图片预览功能实现
27. String _result = "";
28. Enumeration files = multi.getFileNames();
29. while (files.hasMoreElements()) {
30. String name = (String) files.nextElement();
31. File f = multi.getFile(name);
32. if (f != null) {
33. String fileName = multi.getFilesystemName(name);
34. String lastFileName = saveDirectory + "/" + fileName;
35. result += multi.getOriginalFileName(name) + "," + savePath + "/" + fileName;
36. }
37. }
38. outs.print(_result);
39. }

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

3，SSH框架中使用

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

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

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

4，实现的效果图如下：

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