一、简介

  Uploadify是JQuery的一个上传插件，实现的效果非常不错，带进度显示；可以上传多个文件；

   详细的使用方法网上有很多，建议到官网参考，这里仅仅展示其使用的效果；

  官网：www.uploadify.com（注：本人今天就进入了一次官网，之后再也进不去了……）；

  在官网下载最新的版本；但是本人下载Uploadify所需的所有JS最新文件，不知为何原因不能正确显示，只好将原有项目的JS文件拷贝进自己的项目中，其中必须的文件：jquery-1.4.2.min.js；

jquery.uploadify.v2.1.0.min.js；swfobject.js；uploadify.swf；

  其中swfobject.js这个JS是用于在HTML中方面插入Adobe Flash媒体资源（*.swf文件）的独立、敏捷的JavaScript模块，该模块中的JavaScript脚本能够自动检测PC、Mac机器上各种 主流浏览器对Flash插件的支持情况。

以上所需的JS文件本人全部在官网下载最新的版本，但是使用失败，我能力有限只能归罪于版本的兼容；便使用了原有的文件；


二、有了必须的资源之后，就是将所需的文件导入：

   下图便为项目的目录结构

205325511.jpg

项目准备好之后，便开始构建上传的功能了；当然要将需要的文件在jsp页面说明；

首先index.js

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    <title>更改头像</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0"> 
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
                                                                                                                                   
  <link rel="stylesheet" href="css/default.css" type="text/css"></link>
  <link rel="stylesheet" href="css/uploadify.css" type="text/css"></link>
  <link rel="stylesheet" href="css/jquery.Jcrop.css" type="text/css"></link>
                                                                                                                                 
  <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
  <script type="text/javascript"     src="js/jquery.uploadify.v2.1.0.min.js"></script>
  <script type="text/javascript" src="js/swfobject.js"></script>
  <script type="text/javascript" src="js/fileupload.js"></script>
   //fileupload.js是自己封装的JS文件，主要便是使用uploadify插件
  </head>
  <body>
  <div> </div>
   <div style="font-size: 15px;">
   图片文件:&nbsp&nbsp&nbsp
  <input type="file" name="file" id="file" /></div>
  <input type="button" id="uploadFile" value="上传文件">
  <input type="button" id="cancelUpload" value="取消上传">
  <div id="fileList" style="height:51px;"></div>
</table>
  </body>
</html>

这个index.jsp的预览效果图如下：

205922754.jpg


这里使用uploadify插件的操作封装成JS文件也放在了js目录下（上面的截图中有被涂鸦了，嘿嘿），代码如下：

$(document).ready(function() {
            $("#file").uploadify({
                        'uploader' : 'js/uploadify.swf',
                        'script' : 'UploadServlet',
                        'cancelImg' : 'js/cancel.png',
                        'queueID' : 'fileList', // 和存放队列的DIV的id一致
                        'fileDataName' : 'file', // 和以下input的name属性一致
                        'auto' : false, // 是否自动开始
                        'multi' : false, // 是否支持多文件上传
                        'buttonText' : 'Brower', // 按钮上的文字
                        'simUploadLimit' : 1, // 一次同步上传的文件数目
                        'sizeLimit' : 3145728, // 设置单个文件大小限制 3MB
                        'queueSizeLimit' : 1, // 队列中同时存在的文件个数限制
                        'fileDesc' : '支持格式:jpg/jpeg', // 如果配置了以下的'fileExt'属性，那么这个属性是必须的
                        'fileExt' : '*.jpg;*.jpeg;',// 允许的格式
                        'displayData' : 'percentage',
                        onComplete : function() {
                            alert("文件上传成功");
                        },
                        onError : function(event, queueID, fileObj) {
                            alert("文件:" + fileObj.name + "上传失败");
                        }
                                                                                                                                               
                    });
            $("#uploadFile").click(function() {
                $("#file").uploadifyUpload();
                                                                                                                                   
            });
            });


到这里其前台的工作已经做完，便着手处理业务逻辑了；

三、当选择好文件之后，uploadify组件会如下显示一个进度条：

211358372.jpg

当你点击上传文件时候，便会调用你自己的文件上传的Servlet，实现文件的上传；先展示文件上传成功的界面：

211629339.jpg

下面为文件上传的Servlet：

package com.xzb.fileUpload;
import java.io.File;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.Iterator;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.FileUploadException;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;
public class UploadServlet extends HttpServlet {
    public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        this.doPost(request, response);
    }
    public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        request.setCharacterEncoding("UTF-8");
        response.setContentType("text/html;charset=UTF-8");
        System.out.println("文件上传开始……");
        String savePath = generateDir();
        processUpload(request, response, savePath);
                                                                                            
    }
    /*
     * 上传处理方法
     */
    public void processUpload(HttpServletRequest request,
            HttpServletResponse response, String savePath) {
                                                                                            
                                                                                            
        DiskFileItemFactory factory = new DiskFileItemFactory();
        // 缓存大小为512KB
        factory.setSizeThreshold(524288);
        // 临时文件夹
        factory.setRepository(new File(savePath + "/temp"));
        // 初始化上传控件
        ServletFileUpload upload = new ServletFileUpload(factory);
        // 文件大小最大3MB
        upload.setFileSizeMax(3145728);
        upload.setHeaderEncoding("UTF-8");
        List fileList = null;
        try {
            fileList = upload.parseRequest(request);
        } catch (FileUploadException e) {
            e.printStackTrace();
        }
        Iterator<FileItem> it = fileList.iterator();
        String name = "";
        String filename = "";
        while (it.hasNext()) {
            FileItem item = it.next();
            if (!item.isFormField()) {
                name = item.getName();
                if (name != null && !name.trim().equals("")) {
                    filename = generateFileName(name);
                    File file = new File(savePath + "/" + filename);
                    try {
                        item.write(file);
                        String imgstr = this.getServletContext()
                                .getContextPath();
                        imgstr = imgstr + "/upload/" + filename;
                        response.getWriter().write("http://localhost:8080"+imgstr);
                    } catch (Exception e) {
                        e.printStackTrace();
                    }
                }
            }
        }
    }
    /*
     * 初始化文件存储路径
     */
    private String generateDir() {
        String pathString = getServletConfig().getServletContext().getRealPath(
                "/upload");
        String tempString = getServletConfig().getServletContext().getRealPath(
                "/upload/temp");
        File dirPath = new File(pathString);
        File dirTemp = new File(tempString);
        if (!dirPath.exists()) {
            dirPath.mkdirs();
        }
        if (!dirTemp.exists()) {
            dirTemp.mkdirs();
        }
        return pathString;
    }
    /*
     * 生成文件名
     */
    private String generateFileName(String name) {
        long currentTime = System.currentTimeMillis();
        int i = (int) (Math.random() * 1000D + 1.0D);
        long result = currentTime + i;
        String filename = String.valueOf(result) + getFileExt(name);
        return filename;
    }
    /*
     * 获取文件格式
     */
    private String getFileExt(String name) {
        int pos = name.lastIndexOf(".");
        if (pos > 0) {
            return name.substring(pos);
        } else {
            return name;
        }
    }
}


至此，到你Servlet中所写的目录下查看是否有文件已经传来：

211839619.jpg


至此，利用组将实现文件上传，其本质这个组件并没有实现文件的上传，自己必须亲自写好上传的业务逻辑，组件只是简化并是上传界面友好罢了！只要组件的参数和方法使用恰当，便能自定义许多其他属性；

   这个仅仅是一个开始，接下来还要将上传来的图片进行预览剪切，这时候会用到其他的jQuery组件，达到类似于论坛更换剪切头像的目的；