記錄這個文章爲了方便我以後維護和修改以後上傳所遇到的問題
目前公司用的angular.js,我也是剛到公司,對angular不是很瞭解,比較工做經驗也沒有特別豐富,須要學習的東西還有許多,因此算是一點本身學習過程當中的小筆記
今天要記錄的是angular.js基於FileUploader上傳,關於FileUploader請看
https://blog.csdn.net/zcl_lov...
看了這篇文章,應該不少小夥伴都不須要看一下內容啦。可是我仍是想記錄一下,這樣印象也要深入一點
關於引用,我就不說啦,直接說我在項目中的應用:
首先:html
var uploader= new FileUploader({ url:須要上傳的地址, autoUpload: 是否將文件添加到隊列後自動上傳(Boolean), headers: 與文件一塊兒發送的頭文件,只適合支持html5的瀏覽器,根據實際狀況配置 });
而後:根據需求,篩選我須要的文件類型html5
uploader.filters.push({ name: 自定義滴,想寫什麼寫什麼,哈哈哈, fn: function(item) { //item就是你上傳的文件這裏面你就能夠寫你須要篩選的條件,下面舉一個例子,篩選文件的大小 //$scope.maxSize是我指令傳過來的參數 var fileSizeValid = file.size <= $scope.maxSize; //文件大小限制; return fileSizeValid ; } })
固然,過濾篩選的條件和方法也有不少不少,要是你上傳封裝的是一個指令,你能夠把你所須要的條件經過指令傳過來,更具本身的需求作不一樣的判斷瀏覽器
最後:篩選完以後,就能夠調用FileUploader促發的不一樣函數了。函數
//添加一個文件失敗後觸發 uploader.onWhenAddingFileFailed = function(item , filter, options) {}; // 向隊列中添加一個單獨的文件後觸發 uploader.onAfterAddingFile = function(fileItem) {}; //在全部被拖拽或被選中的文件添加到隊列後觸發。 uploader.onAfterAddingAll = function(addedFileItems) {}; //在上傳一個文件對象以前觸發 uploader.onBeforeUploadItem = function(item) {}; //文件正在上傳中觸發 uploader.onProgressItem = function(fileItem, progress) {}; //文件上傳進度 uploader.onProgressAll = function(progress) {}; //關於上傳隊列的進展 uploader.onSuccessItem = function(fileItem, response, status, headers) {}; //上傳出錯時觸發 uploader.onErrorItem = function(fileItem, response, status, headers) {}; //取消上傳時觸發 uploader.onCancelItem = function(fileItem, response, status, headers) {}; //在文件上傳完成時觸發(獨立操做成功) uploader.onCompleteItem = function(fileItem, response, status, headers) {}; //上傳一個完整的隊列時加載全部的文件,或上傳一個單獨的文件時加載該文件時觸發 uploader.onCompleteAll = function() {}; return uploader;
以上是我所總結的東西,雖然文檔裏面有,可是總結一次印象挺深入的,哈哈哈學習