1. 程式人生 > >多檔案上傳,基於springmvc(MultipartFile)

多檔案上傳,基於springmvc(MultipartFile)

1.講真,檔案上傳現在很少有人自己用 input type=”file” ,這個標籤來自己手動寫上傳過程,一般都是使用了外掛,美觀,而且裡面對各種需求的實現等都有很大的不同。但是今天還是用這個標籤來說明檔案上傳。

2.首先是配置檔案的處理

<!-- 處理檔案上傳 -->
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver"> 
    <!--配置檔案根據你的需求來配置
        //配置上傳檔案編碼 
         <property name="defaultEncoding" value="UTF-8"/> 
         //配置檔案大小的最大值
      <property name="maxUploadSize" value="10000000"/>-->
</bean>

3.然後是前臺頁面的實現,使用input標籤

<form action="" method="post" id="fo" enctype="multipart/form-data"> 
 <table >
    <tr>
        <td class="t_txt">選擇檔案:</td>
        <td> 
          <input type="file" title="選擇要匯入的檔案" name="files" id="fload" multiple
="multiple" />
<input id="pBtn" type="button" value="匯入" onclick="upload_excel()" /> </td> </tr> </table> </form> //點選瀏覽選擇檔案,點選匯入提交到後臺。 //multiple="multiple",在input屬性裡面新增這一行,表示可以進行 多檔案上傳,不然就只能上傳單檔案。 //enctype="multipart/form-data"表示後臺是multipartfile來處理
然後是js程式碼控制,基於jquery
<script type="text/javascript">                     
    function upload_excel(){
        var fileNode = $("#fload");//獲取選擇的檔名
            if($.trim(fileNode.val()) == ""){
                    alert("請選擇匯入檔案");
                    return;
                }
                v_file(fileNode.val());
            }

//驗證檔案格式問題,這裡只讓上傳excel
    function v_file(val){
    //獲取選擇檔案的名字的長度(.+格式 之前的部分)
        var frontPart = val.lastIndexOf(".");
        //檢索字串為空,則該方法返回 -1
        if(frontPart == -1){
                alert("檔名有誤,請檢查");                 
                return false;
            }   
        //擷取檔名後面的部分(.+格式)          
        var lastPart = val.substring(frontPart);

//這裡判斷格式為xls,xlsx才讓上傳
if(lastPart != ".xls" && lastPart  != ".xlsx"){
        alert("檔案格式有誤:請上傳.xls或.xlsx型別檔案");                  
                    return false;
                }
    //提交表單到後臺               
    $("#editForm").ajaxSubmit(function(data){ 
            alert(data.message);//彈出成功或者失敗的資訊                   
            //window.location.reload();//選擇頁面重新整理
                });  
            }
</script>

這裡寫圖片描述

4.後臺處理部分

@RequestMapping("")
@ResponseBody
public Result tlist(HttpServletRequestrequest,HttpServletResponse response, @RequestParam(value="files",required = false) MultipartFile[] files) throws FileNotFoundException,IOException {
//上面的MultipartFile[] files為陣列來接收多檔案
// @RequestParam(value="files",required = false)註解必須要
    if(files != null && files.length>0){
        Result result = new Result();
        //遍歷陣列
         for(int i=0;i<files.length;i++){
         //將每一個檔案分別放入file中
            MultipartFile file = files[i];
            //進入上傳檔案方法
                 result = saveFile(file,request);
                 if(result.isSuccess() == false){
                     return result;
                 }
            }
            return result;
        }
        return new Result("",false,"上傳內容為空");
    }

//上傳檔案方法    
private Result saveFile(MultipartFilefile,HttpServletRequest request){
    if (!file.isEmpty()) {  
        try {
         // 檔案儲存路徑
           String filePath=        request.getSession().getServletContext().getRealPath("/") +(後面是root下一級目錄開始) "resources/test/";
           //獲取檔名
         String fileName = file.getOriginalFilename(); 
          File tagetFile = new File(filePath,fileName);
           // 轉存檔案  
           file.transferTo(tagetFile);  
              return new Result("",true,"上傳成功");
          } catch (Exception e) {               
             e.printStackTrace(); 
              return new Result("",false,"有異常,請處理");
            }              
        }  
        return new Result("",false,"上傳失敗");
    }
//這裡Result是自定義的一個結果類

5.至此,檔案上傳成功,如果想上傳其他的,在js判斷的時候,選擇你要的檔案型別,至於單檔案的上傳,前面input屬性去掉multiple=”multiple”,後臺用MultipartFile files接收就可以了,我試過了excel,圖片都沒有問題。後續有問題再補充。