upload 上传工具类 -

冯银华

浏览: 4821 次
性别:
来自: 广安

最近访客更多访客>>

newersky

feixiongzaixian

大龙湖东哥

yangtianxi

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

upload 上传工具类

博客分类：

java

jquery upload

一、下载最新版的uploadify
     http://www.uploadify.com/download/
二、将压缩包解压，复制
    uploadify.css
   uploadify.swf
   swfobjects.js
   jquery.uploadify.v2.1.0.min.js
   cancel.png
   jquery-1.3.2.min.js
   default.css到项目中。
三、在项目中添加三个jar包
    commons-fileupload-1.2.1.jar
    commons-logging-1.0.4.jar
    commons-io.jar
四、在需要使用上传插件的页页头部导入


Html代码
1.<script type="text/javascript" src="js/jquery-1.4.2.js"></script>
2.
3.<link href="css/default.css" rel="stylesheet" type="text/css" />
4.<link href="css/uploadify.css" rel="stylesheet" type="text/css" />
5.<script type="text/javascript" src="js/swfobject.js"></script>
6.<script type="text/javascript" src="js/jquery.uploadify.v2.1.0.min.js"></script>
7.<script type="text/javascript" src="js/function.js"></script>
8.

五、编写js文件

Js代码
1.$(document).ready(function(){
2.    //A文件上传
3.        $("#uploadFile").uploadify({
4.        'uploader'       : 'images/uploadify.swf',//指定上传控件的主体文件，默认‘uploader.swf’
5.        'script'         : 'UploadServlet', //指定服务器端上传处理文件
6.        'scriptData'     : {'uploadFile':$('#uploadFile').val()},
7.        'cancelImg'      : 'images/cancel.png',
8.        'fileDataName'   : 'uploadFile',
9.        'fileDesc'       : 'jpg文件或jpeg文件或gif文件', //出现在上传对话框中的文件类型描述
10.        'fileExt'        : '*.jpg;*.jpeg;*.gif',      //控制可上传文件的扩展名，启用本项时需同时声明fileDesc
11.        'sizeLimit'      : 512000,           //控制上传文件的大小，单位byte
12.        'folder'         : '/uploadImages',
13.        'queueID'        : 'fileQueueA',
14.        'auto'           : false,
15.        'multi'          : true
16.    });
17.});
18.

六、html代码

Html代码
1.<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
2.<html>
3.<head>
4.<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
5.<title>jquery 文件上传</title>
6.</head>
7.<script type="text/javascript" src="js/jquery-1.4.2.js"></script>
8.
9.<link href="css/default.css" rel="stylesheet" type="text/css" />
10.<link href="css/uploadify.css" rel="stylesheet" type="text/css" />
11.<script type="text/javascript" src="js/swfobject.js"></script>
12.<script type="text/javascript" src="js/jquery.uploadify.v2.1.0.min.js"></script>
13.<script type="text/javascript" src="js/function.js"></script>
14.
15.<body>
16.
17.<div id="pic" style="position: absolute; right: 28px; top: 79px; width: 180px; height: 230px; z-index: 2;"></div>
18.<div class="demo">
19.<p><strong>Multiple File Upload</strong></p>
20.<input id="uploadFile" name="uploadFile" type="file" /> <a href="javascript:$('#uploadFile').uploadifyUpload();">Upload Files</a> | <a href="javascript:$('#uploadFile').uploadifyClearQueue();">Clear Queue</a></div>
21.
22. <div id="fileQueueA" ></div>
23.</body>
24.</html>

七、servlet代码

Java代码
1.package com.aptech.servlet;
2.
3.import java.io.File;
4.import java.io.IOException;
5.import java.util.Iterator;
6.import java.util.List;
7.import javax.servlet.ServletConfig;
8.import javax.servlet.ServletException;
9.import javax.servlet.http.HttpServlet;
10.import javax.servlet.http.HttpServletRequest;
11.import javax.servlet.http.HttpServletResponse;
12.import org.apache.commons.fileupload.FileItem;
13.import org.apache.commons.fileupload.FileUploadException;
14.import org.apache.commons.fileupload.disk.DiskFileItemFactory;
15.import org.apache.commons.fileupload.servlet.ServletFileUpload;
16.import com.aptech.util.FileUploadUtil;
17.
18./**
19. * Servlet implementation class UploadServlet
20. */
21.public class UploadServlet extends HttpServlet {
22.    private static final long serialVersionUID = 1L;
23. private static String     path;
24.    /**
25.     * Default constructor.
26.     */
27.    public UploadServlet() {
28.        // TODO Auto-generated constructor stub
29.    }
30.
31.    /**
32.     * @see HttpServlet#service(HttpServletRequest request, HttpServletResponse response)
33.     */
34.    @Override
35. protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
36.
37.    // 生成存放文件的路径
38.    String savePath = path + "/";
39.
40.    File f1 = new File(savePath);
41.
42.    if (!f1.exists()) {
43.      f1.mkdirs();
44.    }
45.
46.    DiskFileItemFactory fac = new DiskFileItemFactory();
47.
48.    ServletFileUpload upload = new ServletFileUpload(fac);
49.
50.    upload.setHeaderEncoding("utf-8");
51.
52.    List fileList = null;
53.    try {
54.      fileList = upload.parseRequest(request);
55.    } catch (FileUploadException ex) {
56.      return;
57.    }
58.    Iterator<FileItem> it = fileList.iterator();
59.    String name = "";
60.
61.    String extName = "";
62.
63.    while (it.hasNext()) {
64.
65.      FileItem item = it.next();
66.
67.      if (!item.isFormField()) {
68.
69.        name = item.getName();
70.
71.        // 新的文件名
72.        String newUploadFileName = FileUploadUtil.getlnstance().getNewFileName(name);
73.
74.        // // 扩展名格式：
75.        //
76.        // if (name.lastIndexOf(".") >= 0) {
77.        //
78.        // extName = name.substring(name.lastIndexOf("."));
79.        //
80.        // }
81.
82.        File saveFile = new File(savePath + newUploadFileName);
83.        try {
84.
85.          item.write(saveFile);
86.
87.        } catch (Exception e) {
88.
89.          e.printStackTrace();
90.
91.        }
92.
93.      }
94.
95.    }
96. }
97.
98. @Override
99. public void init(ServletConfig config) throws ServletException {
100.    path = config.getServletContext().getRealPath("/uploadImages");
101. }
102.
103.
104.}

八、配置servlet

Xml代码
1.<?xml version="1.0" encoding="UTF-8"?>
2.<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" id="WebApp_ID" version="2.5">
3. <display-name>jquery_upload</display-name>
4. <welcome-file-list>
5.    <welcome-file>index.html</welcome-file>
6.    <welcome-file>index.htm</welcome-file>
7.    <welcome-file>index.jsp</welcome-file>
8.    <welcome-file>default.html</welcome-file>
9.    <welcome-file>default.htm</welcome-file>
10.    <welcome-file>default.jsp</welcome-file>
11. </welcome-file-list>
12. <servlet>
13.    <description></description>
14.    <display-name>UploadServlet</display-name>
15.    <servlet-name>UploadServlet</servlet-name>
16.    <servlet-class>com.aptech.servlet.UploadServlet</servlet-class>
17. </servlet>
18. <servlet-mapping>
19.    <servlet-name>UploadServlet</servlet-name>
20.    <url-pattern>/UploadServlet</url-pattern>
21. </servlet-mapping>
22.</web-app>

分享到：