jquery的uploadify上传jsp+servlet

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. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  6. <html>
  7. <head>
  8. <title>上传</title>
  9. <meta http-equiv="pragma" content="no-cache">
  10. <meta http-equiv="cache-control" content="no-cache">
  11. <meta http-equiv="expires" content="0">

  12. <!-- 样式及js加载 这儿得注意引入的路径是否正确应用的时候自己多加小心-->

  13. <link href="./style/uploadify/default.css" rel="stylesheet" type="text/css" />
    <link href="./style/uploadify/uploadify.css" rel="stylesheet" type="text/css" />
  14. <script language="javascript" src="<c:url value="/scripts/jquery.js"/>"></script>
  15. <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>
  16. <script type="text/javascript">
  17. $(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) {
  18. //后台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) {
  19. //所有上传成功的返回返回处理
    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();
    });
    }
    }
    })
    });


  20. </script>
  21. </head>
  22. <body>
  23. <div id="uploadJqFy">
    <div id="fileQueue" style="display:none;"></div>
    <input type="file" name="uploadify" id="uploadify" />
    <p>仅支持jpg、png、gif格式的图片</p>
    </div>

  24. </body>
  25. </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. import java.awt.image.BufferedImage;
  3. import java.io.File;
  4. import java.io.IOException;
  5. import java.io.PrintWriter;
  6. import java.util.Date;
  7. import java.util.HashMap;
  8. import java.util.List;
  9. import java.util.Map;

  10. import javax.imageio.ImageIO;
  11. import javax.servlet.ServletException;
  12. import javax.servlet.http.HttpServlet;
  13. import javax.servlet.http.HttpServletRequest;
  14. import javax.servlet.http.HttpServletResponse;

  15. import org.apache.commons.fileupload.FileItem;
  16. import org.apache.commons.fileupload.FileUploadException;
  17. import org.apache.commons.fileupload.disk.DiskFileItemFactory;
  18. import org.apache.commons.fileupload.servlet.ServletFileUpload;

  19. import com.ccsuntel.linkupuser.base.Config;
  20. import com.ccsuntel.linkupuser.base.Constant;
  21. import com.ccsuntel.linkupuser.base.dispatch.Base;
  22. import com.ccsuntel.linkupuser.util.Tool;
  23. import com.ccsuntel.linkupuser.util.UploadTool;

  24. public class UploadTmpPhotoServlet extends HttpServlet {

  25. @Override
  26. public void doGet(HttpServletRequest request, HttpServletResponse response)
  27. throws ServletException, IOException {

  28. }

  29. @Override
  30. public void doPost(HttpServletRequest request, HttpServletResponse response)
  31. throws ServletException, IOException {
  32. DiskFileItemFactory factory = new DiskFileItemFactory();
  33. // 设置内存缓冲区,超过后写入临时文件

  34. factory.setSizeThreshold(10240000);
  35. // 设置临时文件存储位置

  36. String base = Config.getInstance().getWorkGtmpPath();//this.getServletContext().getRealPath("/")+"files";

  37. File file = new File(base);
  38. if(!file.exists())
  39. file.mkdirs();
  40. factory.setRepository(file);
  41. ServletFileUpload upload = new ServletFileUpload(factory);
  42. // 设置单个文件的最大上传值

  43. upload.setFileSizeMax(10002400000l);
  44. // 设置整个request的最大值

  45. upload.setSizeMax(10002400000l);
  46. upload.setHeaderEncoding("UTF-8");
  47. request.setCharacterEncoding("utf-8");
  48. response.setCharacterEncoding("utf-8");
  49. PrintWriter out = response.getWriter();
  50. try {
  51. List<?> items = upload.parseRequest(request);
  52. FileItem item = null;
  53. String tpmFilePathName = null;
  54. String savePath = Config.getInstance().getLinkfilesavePath();
  55. Map<String,String> fileNames = new HashMap<String, String>();
  56. for (int i = 0 ;i < items.size(); i++){
  57. item = (FileItem) items.get(i);
  58. // 保存文件

  59. if (!item.isFormField() && item.getName().length() > 0) {
  60. fileNames.put("oldName", item.getName());
  61. String suffixName = item.getName().substring(item.getName().lastIndexOf("."));
  62. String newName=UploadTool.createPhotoID()+suffixName;
  63. fileNames.put("newName", newName);
  64. fileNames.put("fileSize", UploadTool.FormetFileSize(item.getSize()));
  65. //System.out.println(item.getName()+"=="+UploadTool.createPhotoID()+suffixName+"=="+UploadTool.FormetFileSize(item.getSize())+"savePath"+savePath);

  66. tpmFilePathName = base + newName;//File.separator

  67. item.write(new File(tpmFilePathName));
  68. //UploadTool.removeFile(tpmFilePathName);

  69. BufferedImage bufImg = ImageIO.read(new File(tpmFilePathName));
  70. //System.out.print("======"+bufImg.getHeight()+"====="+bufImg.getWidth());
  71. //数据库操作,包图片的路径及其相应的信息保存到数据库,
  72. out.print(newName+"^"+bufImg.getHeight()+"^"+bufImg.getWidth());
  73. }
  74. }



  75. //Map<String,String> fileNames = UploadTool.WorkGroupFileUpload(request, Config.getInstance().getLinkfiletmpPath(), Config.getInstance().getLinkfilesavePath());


  76. } catch (FileUploadException e) {
  77. out.print(-1);
  78. e.printStackTrace();
  79. } catch (Exception e) {
  80. out.print(-1);
  81. e.printStackTrace();
  82. }finally{
  83. out.flush();
  84. out.close();
  85. }

  86. }

  87. }
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值