最近做檔案上傳，使用了jquery-uploadify外掛，用的是官網最新的3.2版本，官網地址：http://www.uploadify.com/download/

在這裡建議下：在面對最新的版本的時候，最好是去它的官網檢視文件，同時借鑑下別人寫的舊版本的使用心得，這樣就能快速的上手了，好了，言歸正傳，let's go

解壓下載的檔案到任意一個目錄下面，資料夾名稱為uploadify,最好是自己重新命名一下，在後面加上版本號；檔案內容如下

官方給的是php的示例，這裡我用的java所以就不看了，直接刪了只留下以下檔案：

接下來就是如何使用了，首先，在頁面加入引用，主要是三個檔案，一個是jquery必不可少的，另外兩個就是外掛資料夾下面的了，這個外掛資料夾可以拷貝到自己的專案路徑下，如我的就是在專案根目錄下的js檔案裡面，同時要在根目錄下面建立一個img資料夾，將上圖中的uploadify-cancel.png圖片放進去，這樣子可以解決外掛取消檔案佇列報錯找不到圖片的錯誤

<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<link rel="stylesheet" type="text/css" href="./js/uploadify/uploadify.css">
<script type="text/javascript" src="./js/uploadify/jquery.uploadify.js"></script>

 這裡圖片路徑一定要是對的，還有一個要注意的問題就是jquery衝突 問題，在很多時候做頁面的時候，我們都是喜歡引入頭部，底部兩個頁面，問題就在這裡，如果你的主頁面也就是需要用到外掛的頁面引入了這兩個頁面的話，必須保證這兩個頁面中沒有引入多餘的jquery.js檔案，不然就會導致出現$(..).uploadify not a function 的錯誤

接下來就是渲染上傳按鈕的操作了，程式碼如下：

頁面HTML

<tr>
    <td class="align_right">
            <em><font color="red">*</font></em>
            <label>上傳寫真照</label>
    </td>
    <td class="input_style">
    <div class="upload_div"
 
>
        <input id="upload_photo" class="upload_button" type="button" value="本地上傳"/>
        <input type="hidden" id="userPhoto" name="userPhoto"/>
        <div id="photo_queue"></div>
            <p>最多上傳10張照片，尺寸480*800，格式jpg或png可批量上傳</p>
    </div>
    </td>
</tr>

JS檔案

$("#upload_photo").uploadify({
        //按鈕額外自己新增點的樣式類.upload
        'buttonClass'        :    'upload',
        //限制檔案上傳大小
        'fileSizeLimit'        :    '2MB',
        //檔案選擇框顯示
        'fileTypeDesc'        :     '選擇圖片',
        //檔案型別過濾
        'fileTypeExts'         :     '*.jpg;*.png',
        //按鈕高度
        'height'            :    '30',
        //按鈕寬度
        'width'                :    '100',
        //請求型別
        'method'            :    'post',
        //是否支援多檔案上傳
        'multi'                :     true,
        //需要重寫的事件
        'overrideEvents'    :    ['onDialogClose','onSelectError','onUploadError'],
        //佇列ID，用來顯示檔案上傳佇列與進度
        'queueID'            :    'photo_queue',
        //佇列一次最多允許的檔案數，也就是一次最多進入上傳佇列的檔案數
        'queueSizeLimit'    :    10,
        //上傳動畫，外掛檔案下的swf檔案
        'swf'                :    './js/uploadify/uploadify.swf',
        //處理上傳檔案的服務類
        'uploader'            :    '/UploadFileServlet?type=photo&uploadPath=' + userId + '\\' + appId,
        //上傳檔案個數限制
        'uploadLimit'        :   10,
        //上傳按鈕內容顯示文字
        'buttonText'        :    '圖片上傳',
        //自定義重寫的方法，檔案上傳錯誤觸發
        'onUploadError'        :    uploadify_onUploadError,
        //檔案選擇錯誤觸發
        'onSelectError'        :    uploadify_onSelectError,
        //檔案佇列上傳完畢觸發
        'onQueueComplete'    :    heightReset,
        //佇列開始上傳觸發
        'onUploadStart'        :   heightFit,
        //單個檔案上傳成功觸發
        'onUploadSuccess'    :    function(file, data, response){
            $("#userPhoto").attr("value",data);
            //恢復原始高度
        }
    });

這裡有個小問題就是：'queueSizeLimit' 和 'uploadLimit'這兩個引數配置的效果是一樣的，而且哪個配置的小，就是按照哪個來的，也就是說想通過外掛來實現限制上傳檔案個數是不現實的，這個必須結合後臺程式才能限制總的檔案上傳個數。可以在'onUploadStart'中通過ajax請求後臺程式，返回檔案個數，然後在做相應的處理

後臺處理檔案上傳服務類：

public Map<String, String> uploadPackage(HttpServletRequest request, HttpServletResponse response)
        throws ServletException, IOException {
        //使用apache開源組織下的commons-fileupload-1.2.jar元件做檔案上傳
        String projectPath = PathTool.getWebRootPath();
        String tempPath = projectPath + "uploadFile/temp";
        Map<String, String> params = new HashMap<String, String>();
        try
        {
            DiskFileItemFactory factory = new DiskFileItemFactory();
            //設定檔案緩衝區大小
            factory.setSizeThreshold(1024 * 1024);
            //超過緩衝區大小，臨時檔案放在什麼地方
            factory.setRepository(new File(tempPath));
            
            //2、使用檔案上傳工廠，建立一個檔案上傳的servlet物件；解析表單，儲存到list裡面
            ServletFileUpload upload = new ServletFileUpload(factory);
            //允許上傳的大小，以位元組為單位
            upload.setFileSizeMax(1024 * 1024 * 1024);
            //設定編碼格式
            upload.setHeaderEncoding("UTF-8");
            // 得到所有的表單域，它們目前都被當作FileItem
            List<FileItem> items = upload.parseRequest(request);
            Iterator<FileItem> iter = items.iterator();
            // 依次處理請求
            while (iter.hasNext())
            {
                FileItem item = iter.next();
                if (item.isFormField())
                {    // 如果是普通的表單域
                    /* "處理普通表單內容 ... */
                    String name = item.getFieldName();
                    String value = new String(item.getString().getBytes("ISO-8859-1"), "utf-8");
                    params.put(name, value);
                }
                else
                { /* 如果是檔案上傳表單域 */
                    // 1.獲取檔名
                    String fileName = item.getName();
                    String fieldName = item.getFieldName();    //檔案域名稱
                    String contentType = item.getContentType();    //檔案型別
                    if (fileName != null & !"".equals(fileName))
                    {    
                        System.out.println("檔案域名稱：" + fieldName + "\n檔名：" + fileName + "\n檔案型別：" + contentType);
                        //獲取檔案字尾名
                        String suffix = fileName.substring(fileName.lastIndexOf(".")+1);
                        // 2.先將上傳檔案儲存到本地硬碟上
                        ServletContext context = this.getServletContext();
                        String dir = "";
                        //=======將上傳的檔案存放到伺服器的專門的資料夾下：uploadfile============
                        Date date = new Date();
                        SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMddhhmmss");
                        fileName = sdf.format(date) + fileName;
                        //這裡判斷檔案型別
                        //以應用id做為資料夾分類
                        if("png".equals(suffix) || "jpg".equals(suffix)){
                            dir = context.getRealPath("uploadFile/photo/");
                        }
                        if("mp3".equals(suffix)){
                            dir = context.getRealPath("uploadFile/music/");
                        }
                        dir += appId;
                        System.out.println(dir);
                        File file = new File(dir,fileName);
                        //當且僅當不存在具有此抽象路徑名指定名稱的檔案時，不可分地建立一個新的空檔案
                        file.createNewFile();
                        // 獲得流，讀取資料寫入檔案  
                        InputStream in = item.getInputStream();  
                        FileOutputStream fos = new FileOutputStream(file);  
                        int len = 0;
                        byte[] buffer = new byte[1024];
                        // 3.獲取本地檔案的絕對路徑
                        while ((len = in.read(buffer)) > 0){
                            fos.write(buffer, 0, len); 
                        }  
                        // 關閉資原始檔操作  
                        fos.close();  
                        in.close();  
                        // 刪除臨時檔案  
                        item.delete();  
                        //new FtpUploadThread(filepath, "handbb_down", fileName).run();
                        //這裡判斷是圖片還是mp3檔案
                        if("png".equals(suffix) || "jpg".equals(suffix)){
                            photo += fileName + ",";
                        }
                        
                        if("mp3".equals(suffix)){
                            music += fileName + ",";
                        }
                        // 7.刪除本地檔案
                        //file.delete();
                    }
                    else
                    {// 修改操作時，如果沒有上傳檔案
//                        if("icon_url".equalsIgnoreCase(fieldName)){
//                        }
//                        if("download_url".equalsIgnoreCase(fieldName)){
//                        }
                    }
                }
            }
            params.put("photo", photo);
            params.put("music", music);
        }
        catch (Exception e)
        {
            e.printStackTrace();
        }
        return params;
    }

好了，基本的使用方法就到這裡了