使用fileinput與angularjs上傳檔案

目錄

• • • 目錄
    • 檔案準備
    • form表單的代碼
    • angular的代碼
    • 伺服器端代碼
    • angular自啟動函數寫法

檔案準備

首先必要的是引入fileinput的相關js和cs檔案

<link type="text/css" rel="stylesheet" href="css/fileinput.css" />
<script src=" js/fileinput.js"></script>
<script  src=" js/fileinput_locale_zh.js"></script>
<script src="jquery.min.js"></script>
<script src="angular.js"></script> 
           

form表單的代碼：

<input id="fileupload" type="file"
class="file-loading ">
           

angular的代碼：

頁面你拖拽了檔案之後點選上傳就行，

//這一段代碼是必須和頁面同時加載的,否則頁面會出現空白，是以需要再進行一次封裝，參考最後的目錄
angular.element("#fileupload").fileinput({
language : 'zh',//中文化
uploadUrl : "localhost：8080/find/fileUpload", //伺服器位址
allowedFileExtensions : [ 'xlsx' ], // 允許的類型
maxFileSize : ,//檔案的最大size
maxFileCount: , //表示允許同時上傳的最大檔案個數，配置隻一個
enctype: 'multipart/form-data',
});
//上傳之後伺服器傳回的資訊，判斷是否上傳成功
angular.element("#fileupload").on('fileuploaded',function(e,data){
   // 注意 data.response 才是你伺服器傳回的資料，不是data
   var resp=data.response;
   if(resp.code>){
      alert('上傳成功');
   }else{
      alert('上傳不成功');
   }
});
           

伺服器端代碼：

采用最原始的HttpServletRequest去擷取檔案

@RequestMapping( name="find/fileUpload"  )
@ResponseBody
    public ResultData springUpload(HttpServletRequest request) throws IllegalStateException, IOException
    { 
         //将目前上下文初始化給  CommonsMutipartResolver （多部分解析器）
        CommonsMultipartResolver multipartResolver=new CommonsMultipartResolver(
                request.getSession().getServletContext());
        //檢查form中是否有enctype="multipart/form-data"
        if(multipartResolver.isMultipart(request))
        {
            //将request變成多部分request
            MultipartHttpServletRequest multiRequest=(MultipartHttpServletRequest)request;
           //擷取multiRequest 中所有的檔案名
            Iterator iter=multiRequest.getFileNames();

            while(iter.hasNext())
            {
                //一次周遊所有檔案
                MultipartFile file=multiRequest.getFile(iter.next().toString());
                if(file!=null)
                {
                // 你自己的邏輯操作
                    String path="E:/springUpload"+file.getOriginalFilename();
                    //上傳
                    file.transferTo(new File(path));
                }

            }

        } 
        ResultData rd=new ResultData("1000","上傳成功");
        return  rd; 
    }
           

angular自啟動函數寫法

第一種

(function() { 
    function logger() { 需要dom加載之後，自動執行的函數}
})();
           

第二種

<div ng-controller="test">
     <div data-ng-init="load()" >
            // 你需要初始化的代碼
      </div>
</div>
myapp.controller('test', ['$scope', 
    function($scope) {
        $scope.load = function() {
             alert('code here');
        }
}]);