angular file upload的使用總結

2021-07-26 23:43:38 字數 1730 閱讀 1743

第一次使用這個元件,感覺這個元件的api在介紹略微簡單,所以嘗試了一會兒才成功。

這邊我需要的功能是:

1.只能匯入xls。

2.可以選擇檔案。

3.可以拖動檔案上傳。

4.上傳過程中顯示process。

html頁面部分code

class="drop-file" nv-file-drop="" uploader="uploader" filters="uploadefilter">

"file" nv-file-select uploader="uploader" alt="" title="" filters="uploadefilter"

class="fileinput"

id="fileinput" />

class="action-message">

class="xls-image"> to attach files drag & drop here or

class="file-input-link" ng-click="openfileinput()">select files from your computer...

div>

class="file-process">

class="process">

class="progress-bar" role="progressbar" ng-style="" style="width: 0%;">div>

div>

class="file-name">}div>

div>

div>

controller 部分code

首先需要在模組依賴中引入fileuploader

//alias 表示對面的後端file引數的名字,url表示所要call的api路徑,headers裡面可以加入各種http請求引數,如常用的token的值,formdata表示在這個http請求中你還想附帶的資料物件。這幾個引數是我感覺在這個上傳檔案中比較重要的,幾乎都要用到的。

$scope.uploader = new fileuploader(,

formdata:

});//filter是對你上次檔案的過濾進行的處理,過濾非xls文件,這個功能是在所有功能之前執行。在html中配置filters="uploadefilter"

$scope.uploader.filters.push(

});//onafteraddingfile是在檔案選擇之後觸發的事件,由於我這邊沒有upload按鈕,而是在檔案選擇之後就上傳檔案,所以需要直接觸發upload事件,而且是只有乙個檔案。

$scope.uploader.onafteraddingfile = function

(fileitem)

settimeout(function

() , 400);

};

angular-file-upload的fileuploader 的實力物件:

我們每次上傳乙個檔案,對應的scope.uploader.queue的陣列後面就會新增乙個該檔案的資料物件,這個list是所有檔案的list,每個item中包含檔案的上傳進度process等屬性, scope.uploader.process表示所有檔案的上傳進度。

MYBATIS RESULTMAP的使用總結

resultmap是mybatis最強大的元素,它可以將查詢到的複雜資料 比如查詢到幾個表中資料 對映到乙個結果集當中。resultmap包含的元素 1 2 3 4 5 6 7 8 9 10 11 12 13 14 如果collection標籤是使用巢狀查詢,格式如下 以下以例項介紹resultma...

VMWare Workstation使用總結幾則

1 安裝 使用ghost盤安裝時一定要注意,需要把空盤建立分割槽並設定為主分割槽 pq的使用形式,進入pq找到磁碟設定為啟用 否則 啟動後顯示boot from network intel e1000 有時裝機忘了,只能從頭再來 安裝64位的虛擬機器時,需要把bios中virtual technol...

VMWare Workstation使用總結幾則

1 安裝 使用ghost盤安裝時一定要注意,需要把空盤建立分割槽並設定為主分割槽 pq的使用形式,進入pq找到磁碟設定為啟用 否則 啟動後顯示boot from network intel e1000 有時裝機忘了,只能從頭再來 安裝64位的虛擬機器時,需要把bios中virtual technol...