1. 程式人生 > >SpringMVC+Ajax+ajaxFileUpload實現多附件上傳

SpringMVC+Ajax+ajaxFileUpload實現多附件上傳

效果圖如下:

請求提交後儲存至根目錄,以統一信用編碼命名。

1.適用需求:

1)新增附件作為表單的一個輸入項,因此適用於提交表單資訊的同時要上傳附件的情況。(即:附件欄位只作為提交內容的附加資訊)

2)表單通過ajax提交

2)可以上傳多個檔案

2.功能實現所需控制元件/檔案:

1) 輸入型別為file的輸入框:<input type=”file”/>

2)檔案上傳請求指令碼:ajaxFileUpload.js

3.功能點實現思路:

1)功能點:要求點選新增附件的時候彈出檔案選擇框,選擇檔案後,自動新增一行顯示檔名稱與大小(以下簡稱該區域為“檔案資訊塊”)。

思路:仔細想想該部分實現起來並不麻煩,給新增按鈕繫結點選事件,點選事件動態創建出“檔案資訊塊”即可。

注意,“點選新增”與“建立檔案資訊塊”之間有很重要的一步:選擇要上傳的檔案。

選擇上傳檔案視窗是<input type=”file”/>(以下簡稱“檔案輸入框”)點選上傳觸發的,因此我們需要在新增按鈕繫結的事件裡動態生成該控制元件,同時觸發其click事件開啟檔案選擇視窗。當選中檔案後,需要生成對應的“檔案資訊塊”,而“檔案資訊塊”生成的觸發事件就是選擇要上傳的檔案後。即:“檔案輸入框”的onchange()事件。這裡要弄明白,整個過程中我們只調用了“檔案輸入框”的各種事件,實際展示的是“檔案資訊塊”,因此“檔案輸入框”沒必要顯示(設定display:none即可,提交仍能檢測到)

部分程式碼:  

         /* 新增附件按鈕點選事件 */

         $('#addAttachment').on('click',function(){  //addAttachment為新增按鈕的id

                   var fileId="inputFile"+i;

                   var str='<input id="'+fileId+'"type="file" calss="'+fileId+'" name="'+fileId+'" data_hideId="'+fileId+'"style="width:150px;height:30px;display:none">';

                  $(this).parent().append(str);

                   $("#"+fileId).attr("onchange","showFileArea(this)");   //註冊onchange()方法

                   document.getElementById(fileId).click();                 //立即出發click事件,選擇文//件後觸發onchange()事件

                   i++;

         })

/* 新增“檔案資訊塊”*/

         function showFileArea(e){       

         var fileId=$(e).attr("data_hideId");

         var file = $(e).get(0).files[0];     //獲取檔案

         var fileName=file.name;         //獲取檔名

         var fileSize=file.size;                //計算檔案大小

         if(fileSize>=1024)

                   fileSize=fileSize/1024 +' MB';

         else

                   fileSize=fileSize+' B';

         var str='<div class="inputFileLabel '+fileId+'">'+fileName+'('+fileSize+')'+   //追加“檔案//資訊塊”

                            '<a class="deleteFile"  data_hideId="'+

                            fileId+

                            '" onclick="closeFile(this)">x</a>'+

                            '</div>';

         $(e).parent().append(str);

         }

以上程式碼利用class和id對標籤進行了標記,方便刪除附件等操作。至此功能點實現。

2)功能點2:點選提交按鈕,實現表單內容(連同附件)的上傳

思路:

點選表單提交的時候,獲取表單內容傳至ajax,並在ajax後臺請求前對檔案進行單獨的請求儲存(ajaxFileUpload)。(這裡之所以在ajax請求裡單獨請求檔案上傳,是因為ajax與後臺傳遞json字串,後臺看到的是檔案的使用者實體地址,不是檔案)

檔案上傳的ajaxFileUpload請求如下:

         /* 上傳附件 */

         function importFileClick(){

                   var inputFileArr=$("[class^='inputFile']");

          for(var i=0;i<inputFileArr.length;i++){     //迴圈,幾個附件請求幾次

                    var inputFile=($(inputFileArr.get(i)).attr("class").split(" "))[1];

                           $.ajaxFileUpload({

                                     url:'abutmentRecord/uploadFile?data='+inputFile,

                            fileElementId:inputFile,               //上傳的檔案id(ajaxFileUpload一次請//求只能上傳一個檔案,需把id傳入;當然,附件多且有能力可以更改js原始碼實現)

                                     secureuri: false,

                                     dataType: 'JSON',

                                     success:function(result){

                                               if(result === 'error'){                                    

                                                        layer.msg("附件上傳失敗!",{icon:2});

                                               }else{                                                      

                                               }

                                     }                          

                            });

                    }     

         }

/*表單提交*/

         $('#btnSave').on('click', function(){ //點選表單提交按鈕

                   var data = $('#getFormInfo').getfromdata().data;   //獲取表單資訊

                  importFileClick();                             //上傳附件請求

                                     $.ajax({

                                     type:"post",

                                      data:data,

                                     url:'abutment/addSave',

                                     contentType: false,

                                     success:function(data){

                                              //do something ….

                                     },

                            });              

                  });

3)功能點3:後臺接收前臺的檔案上傳請求

思路:先引入相應的jar包。專案用maven管理,因此只需配置pom.xml。引入jar包後利用對應的類獲取檔案,設定儲存地址,匯出即可。

部分程式碼:

/*pom.xml配置*/

   <dependency>

             <groupId>commons-fileupload</groupId>

             <artifactId>commons-fileupload</artifactId>

             <version>1.3.1</version>

   </dependency>

/*後臺程式碼*/

         @RequestMapping("/uploadFile")

         @ResponseBody

         public String uploadFile(MultipartHttpServletRequest  request){        //注意引數

                   String result="succed";

                   try {

                            String inputFile=this.getPageParameterData().get("data").toString();

                            CommonsMultipartFile file = (CommonsMultipartFile) request.getFile(inputFile);

                            String fileName = "檔案字首 -"+file.getOriginalFilename();         //獲取檔名

                   String realPath = request.getSession().getServletContext().getRealPath("/"+資料夾名);            //儲存到專案根目錄的一個資料夾下(注意獲取根目錄地址的方法

                 try {

                                     InputStream inputStream = file.getInputStream();

                     FileUtils.copyInputStreamToFile(inputStream, new File(realPath,fileName));

                            } catch (IOException e) {

                                     e.printStackTrace();

                                     result="false";

                            }

                   } catch (Exception e1) {

                            e1.printStackTrace();

                            result="false";

                   }

                   return result;

         }

}

4.功能實現心得

功能的實現參考了網上大量檔案上傳的資料,但沒有一個是完全適用的,與網上資料最主要的不同是,網上上傳附件是單獨的頁面的功能模組,而本系統除了上傳附件,還有其他資料資訊要提交,且表單資訊通過ajax提交(不是formsubmit按鈕提交,因此傳遞的是json字串,檔案無法傳至後臺);因此將功能分解為兩步,附件上傳採用ajaxFileUpload,表單內容採用ajax,在做一些簡單邏輯處理即可。

——————————————————————————————————————————————

ps:轉載分享任意,註明作者和原文連結即可 (●'◡'●)

當然,如果你直接copy程式碼的話很有可能失敗!因為我很多文章只是把部分程式碼貼了出來!而且筆者能力有限,程式碼能夠保證實現功能,但不能保證一定是效能最優的,只提供一個解決問題的大體思路,供大家學習借鑑。如果有什麼錯誤,不足,歡迎指正,一同進步!