最近做文件上傳，使用了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; }
好了，基本的使用方法就到這里了