Uploadify+MultipartFile實現文件上傳

一.form表單(截選)

<table id="myTable" border="0" cellspacing="0" cellpadding="0">    
            <tr id='myTr'> 
                <td class="label">合同附件:</td>
                <td style="padding:0" width="23%"><input class="k-textbox" value="附件名稱" readonly></td>
                <td style="padding:0" width="18%"><input class="k-textbox" value="附件類型" readonly></td>
                <td style="padding:0" width="18%"><input class="k-textbox" value="附件大小" readonly></td>
                <td style="padding:0" width="18%"><input class="k-textbox" value="操做" readonly></td>
                <td style="padding:0" width="8%"></td>
            </tr>

 </table>

=================================================================================

二.js方法

 //設置上傳數據的附加參數
        var　fileId = $("#fileId").val();
        $("#file_upload").uploadify({
            'buttonText'      : '上傳圖片',                                                  //按鈕圖標文字
            'swf'              : '$!{rc.contextPath}/assets/js/upload/uploadify.swf',    //上傳圖片的按鈕（瀏覽）
            'fileObjName'      : 'files',                                                 //上傳的文件對象名，與後臺所傳參數名保持一致
            'queueID'          : 'uploadfileQueue',                                        //顯示圖片上傳進度的div
            'fileTypeExts'    : '*.gif; *.jpg; *.png',                                    //文件後綴限制 默認：'*.*'  
            'auto'              : true,                                                    //選取圖片後自動上傳
            'multi'              : true,                                                    //圖片可多選
            'uploader'          : "$!{rc.contextPath}/contract/uploadfiles?fileId="+fileId,                //上傳圖片的請求路徑
            
            //選擇文件的回調函數
            'onSelect'          : function(file) {
            },
            
            //載入時觸發，隱藏上傳進度條
            'onInit'          : function() {                                            
                $("#uploadfileQueue").hide();
            },
            
            //上傳成功的回調函數(file:文件信息，data：controller返回的信息，response:有響應返回true)
            'onUploadSuccess' : function(file,data,response){
                //notify("上傳圖片成功！","warn");
                //controller返回的信息爲圖片儲存時用的名字，responseBody給其加了雙引號，需去掉
                data = data.replace(new RegExp('\"','g'),'');
                //存儲用的名字
                var realName = data;
                //圖片上傳成功後顯示上傳的圖片信息
                var mytr  = '<tr>'; 
                    mytr +=         '<td style="padding:0"></td>';
                    mytr +=         '<td style="padding:0"><input class="k-textbox" value='+file.name+' readonly></td>';
                    mytr +=         '<td style="padding:0"><input class="k-textbox" value='+(file.type).substring(1)+' readonly></td>';
                    mytr +=         '<td style="padding:0"><input class="k-textbox" value='+parseInt(file.size/1024)+'KB readonly>';
                    mytr +=         '<input type="hidden" value='+realName+'></td>';
                    mytr +=         '<td style="padding:0" onclick="fClear(this);"><input class="k-textbox" type="button" value="移除"  style="text-align:left;color:blue;cursor:pointer;" readonly></td>';
                    mytr += '</tr>';
                $("#myTr").after(mytr);
            }
       });

----------------------------------------------------------------------------------------------------------------------------------------------

//移除操做
    function fClear(e){
        //獲取須要刪除的tr
        var $tr = $(e).closest("tr");
        //刪除tr
        $tr.remove();
        //獲取須要刪除的圖片存儲名
        var $realName = $tr.find('input')[3].value;
        //刪除圖片的請求
        $.post("$!{rc.contextPath}/contract/removeFiles",{realName:$realName},function(data){
            //notify(data,"warn");
        },"json");
    }
    
    //將已有附件添加到表單
    function addtr(){
        #foreach($file in $files)
            var name = "$!{file.name}";
            var type = "$!{file.type}";
            var size = "$!{file.fSize}";
            var realName = "$!{file.realName}";
            var mytr  = '<tr>'; 
                mytr +=         '<td style="padding:0"></td>';
                mytr +=         '<td style="padding:0"><input class="k-textbox" value='+name+' readonly></td>';
                mytr +=         '<td style="padding:0"><input class="k-textbox" value='+type+' readonly></td>';
                mytr +=         '<td style="padding:0"><input class="k-textbox" value='+size+' readonly>';
                mytr +=         '<input type="hidden" value='+realName+'></td>';
                mytr +=         '<td style="padding:0" onclick="fClear(this);"><input class="k-textbox" type="button" value="移除" style="text-align:left;color:blue;cursor:pointer;" readonly></td>';
                mytr += '</tr>';
            $("#myTr").after(mytr);
        #end
    }

 

三.controller

/**
     * 上傳文件
     * @param file 文件
     * @param request  
     * @param fileId 文件的id 
     * @return
     */
    @ResponseBody
    @RequestMapping(value="/uploadfiles",method = RequestMethod.POST)
    public String upload(@RequestParam("files") MultipartFile[] file,HttpServletRequest request,String fileId){
        //設置文件存儲位置
        String path = "C:\\files";
        //String realPath = request.getSession().getServletContext().getRealPath("/uploadfiles");        
        File pathFile = new File(path);
        //文件夾不存在則建立文件夾
        if (!pathFile.exists()) {
          pathFile.mkdirs();
        }        
        //圖片存儲名
        String realName = null;
        for (MultipartFile f : file) {
            try {
                //解決上傳中文圖片爲亂碼的問題
                String name = new String(f.getOriginalFilename().getBytes("ISO-8859-1"),"UTF-8");
                //經過uuid爲文件產生一個惟一的名字防止相同名稱的文件覆蓋
                String type = name.substring(name.lastIndexOf("."));
                realName = UUID.randomUUID()+type;
                type = name.substring(name.lastIndexOf(".")+1);
                String size = (f.getSize()/1024)+"KB";                
                
                //將文件copy上傳到服務器
                f.transferTo(new File(path + "/" + realName));
                MyFile myFile= new MyFile(name,realName,type,size,fileId);
                fileService.saveFiles(myFile);
            } catch (Exception e) {
                // TODO Auto-generated catch block
                e.printStackTrace();
            }
        }
        return realName;
    }
    
    /**
     * 移除文件操做
     * @param name
     * @param request
     * @return
     */
    @ResponseBody
    @RequestMapping(value="/removeFiles",method=RequestMethod.POST)
    public String removeFiles(String realName,HttpServletRequest request){
        //獲取文件存儲位置
        //String realPath = request.getSession().getServletContext().getRealPath("/uploadfiles");
        String path = "C:\\files";
        //在數據庫中刪除對應附件信息
        fileService.deleteByRealName(realName);
        File myFile = new File(path+"/"+realName);  
        //判斷目錄或文件是否存在  
        if (!myFile.exists()) { //不存在返回 false  
            return "文件不存在！"; 
        } else {  
            // 判斷是否爲文件  
            if (myFile.isFile()&& myFile.exists()) {//路徑爲文件且不爲空則進行刪除  
                if(myFile.delete()){
                    return "刪除成功！";
                }else{
                    return "刪除失敗！";
                }
            } else {// 爲目錄時  
                return "文件不存在！";  
            }  
        }  
    }