jquery的uploadify上传jsp+servlet

ゞ浴缸里的玫瑰 2022-08-07 03:38 184阅读 0赞

1.准备材料：下载jquery.uploadify上传js

注意：这个上传在firefox下会出现问题如果你在项目中加了拦截器，因为session会丢失，所以你可以传参的时候带上你所需要的条件，在拦截器可以不作处理这个上传的servlet，也就是判断url，跳过这个servlet的拦截，或者用其他的方法进行判定，比如根据传过来的参数判断是不是有该用户什么的，这就看自己怎么处理，

一定要out.print(data);否则会认为上传不成功，因为前台收不到返回值，这个data可以返回你所需要的参数，然后jsp页面进行处理

'method' : 'GET',  
'scriptData' : \{'userid':'<%=userID%>'\},//传参的时候网上说method要是get，这个我没有测试，用的时候自己调试一下，我这边已经成功了，需要源代码项目的可以留言+邮箱

有些参数可以看官网上的API文档

2、jsp代码

点击(此处)折叠或打开

1.  <%@ page language="java" import="java.util.\*" pageEncoding="UTF-8" contentType="text/html; charset=UTF-8" %>  
    
2.  <%@ include file="/commons/taglibs.jsp"%>  
    
3.  <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>  
    
4.  <%  
    String rootpath = request.getContextPath();  
    long userID = (Long)request.getSession().getAttribute("userID");  
    //上传url  
    String sessionId = request.getSession().getId();  
    StringBuffer uploadUrl = new StringBuffer("http://");  
    uploadUrl.append(request.getHeader("Host"));  
    uploadUrl.append(request.getContextPath());  
    uploadUrl.append("/servlet/UploadSwfTmpPic?sessionId="+sessionId);  
    //上传url--END  
    %>
5.  
6.    
    
7.  <!DOCTYPE HTML PUBLIC  "-//W3C//DTD HTML 4.01 Transitional//EN">  
    
8.  <html>  
    
9.  <head>  
    
10. <title>上传</title>  
    
11. <meta http-equiv="pragma" content="no-cache">  
    
12. <meta http-equiv="cache-control" content="no-cache">  
    
13. <meta http-equiv="expires" content="0">  
    
14. 
15.   
    
16. 
17.   
    
18.   
    <link href="./style/uploadify/default.css" rel="stylesheet" type="text/css" />  
    <link href="./style/uploadify/uploadify.css" rel="stylesheet" type="text/css" /> 
19. <script language="javascript" src="<c:url value="/scripts/jquery.js"/>"></script> 
20. <script type="text/javascript" src="./js/uploadify/swfobject.js"></script>  
    <script type="text/javascript" src="./js/uploadify/jquery.uploadify.v2.0.3.min.js"></script> 
21. <script type="text/javascript">  
    
22. $(document).ready(function() \{  
      
    $("\#showPic").hide();  
    $("\#uploadify").uploadify(\{  
    'uploader' : './js/uploadify/uploadify.swf',  
    'script' : '<%=uploadUrl.toString()%>',//后台处理的请求  
    'cancelImg' : './images/cancel.png', //每个文件后面的取消按钮  
    'folder' : 'uploads',//您想将文件保存到的路径  
    'queueID' : 'fileQueue',//与下面的id对应  
    'queueSizeLimit' : 50,  
    'fileDesc' : '文件格式(\*.png;\*.jpg;\*.gif)',  
    'fileExt' : '\*.png;\*.jpg;\*.gif', //控制可上传文件的扩展名，启用本项时需同时声明fileDesc  
    'auto' : true, //是否自动提交  
    'multi' : false, //是否允许上传多个文件  
    'simUploadLimit' : 1, //允许同时上传的个数为1  
    'rollover' : false,//鼠标移到浏览按钮的反应  
    'method' : 'GET',  
    'scriptData' : \{'userid':'<%=userID%>'\},  
    'buttonText' : 'BROWSE',//BROWSE  
    'buttonImg' : './js/uploadify/uploadify.jpg',  
    'hideButton' : true,  
    'wmode' : 'transparent',  
    'onComplete': function(event, queueID, fileObj,response,data) \{ 
23. //后台servlet一定要有返回值，否则会认为不成功，上传进度条也会不消失  
    if(response != -1)\{  
    $("\#showPic").show();  
    var res = response.split("^");  
    path\_pic = res\[0\];  
    height\_y = res\[1\];  
    width\_y = res\[2\];  
    $('\#oimgW').html(width\_y);  
    $('\#oimgH').html(height\_y);  
    urlallpic = "<%=rootpath%>/uploadfile/tmpdir/"+path\_pic;  
    \}else\{  
    alertWbox($(this), "错误提示", "头像上传失败。", 200, null, 238);  
    \}  
    \},  
    'onSelect': function(e, queueId, fileObj)  
    \{  
    //fileQueue  
    document.getElementById("fileQueue").style.display="";  
    \},  
    'onError' : function(event, queueID, fileObj)  
    \{  
    // alert("文件:" + fileObj.name + " 上传失败");  
    alertWbox($(this), "错误提示", "头像上传失败。", 200, null, 238);  
    \} ,  
      
    'onAllComplete' : function(event, queueID, fileObj,response,data) \{ 
24. //所有上传成功的返回返回处理  
    if(urlallpic != "" )\{  
    document.getElementById("fileQueue").style.display="none";  
    document.getElementById("showPic").style.display="";  
    document.getElementById("ferret").src = urlallpic;  
    document.getElementById("minImg").src = urlallpic;//  
    // setTimeout("readyPic();",5000);  
    imgReady(urlallpic, function () \{  
    initcutpic();  
    \});  
    \}  
    \}  
    \})  
    \}); 
25.   
    
26.   
    
27. </script>
28. </head>  
    
29. <body>  
    
30. <div id="uploadJqFy">  
    <div id="fileQueue" style="display:none;"></div>  
    <input type="file" name="uploadify" id="uploadify" />  
    <p>仅支持jpg、png、gif格式的图片</p>  
    </div>
31.   
    
32. </body>  
    
33. </html>

web.xml

点击(此处)折叠或打开

1.  <servlet>  
    
2.  <servlet-name>uploadCutpic</servlet-name>  
    
3.  <servlet-class>com.ccsuntel.linkupuser.servlet.user.UploadTmpPhotoServlet</servlet-class>  
    
4.  </servlet>  
    
5.  <servlet-mapping>  
    
6.  <servlet-name>uploadCutpic</servlet-name>  
    
7.  <url-pattern>/servlet/UploadSwfTmpPic</url-pattern>  
    
8.  </servlet-mapping>

servlet代码

点击(此处)折叠或打开

1.  package com.ccsuntel.linkupuser.servlet.user;  
    
2.    
    
3.  import  java.awt.image.BufferedImage;  
    
4.  import  java.io.File;  
    
5.  import  java.io.IOException;  
    
6.  import  java.io.PrintWriter;  
    
7.  import  java.util.Date;  
    
8.  import  java.util.HashMap;  
    
9.  import  java.util.List;  
    
10. import  java.util.Map;  
    
11.   
    
12. import  javax.imageio.ImageIO;  
    
13. import  javax.servlet.ServletException;  
    
14. import  javax.servlet.http.HttpServlet;  
    
15. import  javax.servlet.http.HttpServletRequest;  
    
16. import  javax.servlet.http.HttpServletResponse;  
    
17.   
    
18. import  org.apache.commons.fileupload.FileItem;  
    
19. import  org.apache.commons.fileupload.FileUploadException;  
    
20. import  org.apache.commons.fileupload.disk.DiskFileItemFactory;  
    
21. import  org.apache.commons.fileupload.servlet.ServletFileUpload;  
    
22.   
    
23. import com.ccsuntel.linkupuser.base.Config;  
    
24. import com.ccsuntel.linkupuser.base.Constant;  
    
25. import com.ccsuntel.linkupuser.base.dispatch.Base;  
    
26. import com.ccsuntel.linkupuser.util.Tool;  
    
27. import com.ccsuntel.linkupuser.util.UploadTool;  
    
28.   
    
29. public  class UploadTmpPhotoServlet extends HttpServlet \{   
    
30.   
    
31. @Override  
    
32. public  void doGet(HttpServletRequest  request, HttpServletResponse response)  
    
33. throws ServletException, IOException  \{   
    
34.   
    
35. \}  
    
36.   
    
37. @Override  
    
38. public  void doPost(HttpServletRequest  request, HttpServletResponse response)  
    
39. throws ServletException, IOException  \{   
    
40. DiskFileItemFactory factory =  new DiskFileItemFactory();  
    
41. // 设置内存缓冲区，超过后写入临时文件  
    
42.   
    
43. factory.setSizeThreshold(10240000);  
    
44. // 设置临时文件存储位置  
    
45.   
    
46. String base  = Config.getInstance().getWorkGtmpPath();//this.getServletContext().getRealPath("/")+"files";  
    
47.   
    
48. File  file =  new File(base);  
    
49. if(!file.exists())  
    
50. file.mkdirs();  
    
51. factory.setRepository(file);  
    
52. ServletFileUpload upload =  new ServletFileUpload(factory);  
    
53. // 设置单个文件的最大上传值  
    
54.   
    
55. upload.setFileSizeMax(10002400000l);  
    
56. // 设置整个request的最大值  
    
57.   
    
58. upload.setSizeMax(10002400000l);  
    
59. upload.setHeaderEncoding("UTF-8");  
    
60. request.setCharacterEncoding("utf-8");  
    
61. response.setCharacterEncoding("utf-8");  
    
62. PrintWriter out  = response.getWriter();  
    
63. try  \{   
    
64. List<?> items = upload.parseRequest(request);  
    
65. FileItem item  = null;  
    
66. String tpmFilePathName  = null;  
    
67. String savePath  = Config.getInstance().getLinkfilesavePath();  
    
68. Map<String,String> fileNames =  new HashMap<String, String>();  
    
69. for  (int i  = 0 ;i  < items.size(); i\+\+)\{   
    
70. item  = (FileItem) items.get(i);  
    
71. // 保存文件  
    
72.   
    
73. if (!item.isFormField() && item.getName().length() > 0) \{   
    
74. fileNames.put("oldName", item.getName());  
    
75. String suffixName  = item.getName().substring(item.getName().lastIndexOf("."));  
    
76. String newName=UploadTool.createPhotoID()\+suffixName;  
    
77. fileNames.put("newName", newName);  
    
78. fileNames.put("fileSize", UploadTool.FormetFileSize(item.getSize()));  
    
79. //System.out.println(item.getName()+"=="+UploadTool.createPhotoID()+suffixName+"=="+UploadTool.FormetFileSize(item.getSize())+"savePath"+savePath);  
    
80.   
    
81. tpmFilePathName = base  \+ newName;//File.separator  
    
82.   
    
83. item.write(new File(tpmFilePathName));  
    
84. //UploadTool.removeFile(tpmFilePathName);  
    
85.   
    
86. BufferedImage bufImg  = ImageIO.read(new File(tpmFilePathName));  
    
87. //System.out.print("======"+bufImg.getHeight()+"====="+bufImg.getWidth());  
    
88. //数据库操作，包图片的路径及其相应的信息保存到数据库，  
    
89. out.print(newName\+"^"\+bufImg.getHeight()\+"^"\+bufImg.getWidth());  
    
90. \}  
    
91. \}  
    
92.   
    
93.   
    
94.   
    
95. //Map<String,String> fileNames = UploadTool.WorkGroupFileUpload(request, Config.getInstance().getLinkfiletmpPath(), Config.getInstance().getLinkfilesavePath());  
    
96.   
    
97.   
    
98. \} catch (FileUploadException e) \{   
    
99. out.print(\-1);  
    
100. e.printStackTrace();  
    
101. \} catch (Exception e) \{   
    
102. out.print(\-1);  
    
103. e.printStackTrace();  
    
104. \}finally\{   
    
105. out.flush();  
    
106. out.close();  
    
107. \}  
    
108.   
    
109. \}  
    
110.   
    
111. \}