Angularjs上傳檔案組件flowjs功能，angularjsflowjs

Angularjs上傳檔案組件flowjs功能，angularjsflowjs

現在的項目，無論代銷，幾乎不會預設的一個功能就是上傳下載功能，今天談一談使用AngularJS+bootsrtap下的上傳下載功能。

1.angularjs和flowjs

angularjs我在其他的部落格裡面也講到了它的其他的一些用處，只是沒有做過系統的說明，在這裡也不打算一一介紹。這個在一些官網上都有說明，我也會花一點時間去整理一下angularjs的知識點以及在使用到angularjs需要注意的或者我在項目中碰到的一些問題，會在其他部落格中跟大家分享。這裡我只簡單的一筆帶過，主要是flowjs這個組件的使用。順便一提，還得誇誇angularjs的強大。

1.1 flowjs

https://github.com/flowjs/flow.js,這個網站上是我見到過對flowjs這部分描述最清楚的API了，上面列舉了flowjs作為angular下的上傳組件的使用以及屬性的詳細講解。我主要列舉flowjs常用的一些屬性以及使用時需要注意的問題

1.2flowjs屬性

<form class="panel panel-default"    flow-init="{target: 'url',singleFile:false,testChunks:false}"    flow-name="vm.flow"    flow-files-added="!!{pem:1}[$file.getExtension()]"    flow-file-success="vm.action.importCAData($message)"> </form> 

這是一個最簡單的實現上傳功能的代碼，裡麵包含了一些屬性和方法，其他的一些參數這裡暫時用不到，感興趣的請到上面的網站去查閱。

<span style="font-size:18px;" deep="8">{  "flow-init":"初始化上傳的屬性值",  "target":"請求介面路徑，對應到後台server端請求",  "singleFile":"是否選擇單檔案上傳，因為flowjs預設是支援多檔案上傳的，         當然也有的需求會需要單檔案上傳，取值為true或false."         "true是只支援單檔案上傳，false支援多檔案上傳，記得一定是boolean類型的."  "testChunks":"flowjs上傳是分區的，所以他不會只往後台發送一次請求，如果檔案比較大，         它會分多片上傳，然後等所有的都上傳文成，"         "他會去合成一個整體的檔案，而這個屬性設定為true之後就會去檢測一下該請求在後台是否開啟，         如果開了就會在下次即使重啟或者瀏覽器奔潰後繼續上傳，我的理解應該是續傳吧",  "flow-files-added":"可以用來限制上傳檔案的格式，比如excel，pem，jpeg，png等格式要求!!{pem:1,png:1}",  "flow-file-success":"上傳成功之後的回呼函數，你可以在這裡面處理上傳之後的其他動作。比如使用這個組件的時候會和其他表單項一起提交",            "這時我們需要將檔案的上傳路徑，檔案名稱字和其他表單項一起提交到後台，而該組件不支援參數傳遞，也就是使用這個組件",            "分為兩步，第一步：點擊上傳，先將檔案上傳到伺服器指定路徑。同時後台返迴文件路徑，檔案大小，檔案名稱等與檔案相關的資訊",            "第二步：將後台返回的檔案資訊和其他表單項一起封裝到一個對象中，發送給後台。後台接到請求，將上傳資訊進行入庫操作" }</span> 

1.3執行個體

上面已經對flowjs進行了一個說明，在這裡舉個例子來使用一下該組件。關於引入js，我就不詳細說了。

1.3.1組件配置

html代碼（裡面有些我們自訂的樣式我就沒有刪除）：

<form class="panel panel-default"    flow-init="{target: 'api/ham/tool/certificate/importCa',singleFile:true,testChunks:false}"    flow-name="vm.flow"    flow-file-added="!!{pem:1}[$file.getExtension()]"    flow-file-success="vm.action.importCAData($message)">    <div class="panel-heading">       <h4 class="app-heading">          upload file       </h4>    </div>    <div class="panel-body">       <div class="form-horizontal">          <div class="asterisk-info">{{::'button-label.asterisk' | i18next }}</div>          <div class="form-group">             <label class="col-md-3 control-label">*{{::'am.secondaryMenu.tools.certificate.item.uploadCAFile'|i18next}}</label>             <div class="col-md-6 " style="background-color:#eee;">                <div class="file-name-list" style="min-height: 10em;">                   <p ng-repeat="file in $flow.files" style="margin:10px 0px;">                      {{$index+1}}  {{file.name}}                   </p>                </div>             </div>             <span class="btn btn-primary col-md-1" style="margin-left: 20px;" flow-btn>{{::'am.secondaryMenu.tools.certificate.item.upload'|i18next}}</span>          </div>       </div>    </div>    <div class="panel-footer">       <div class="text-right">          <button id="sampleOne-edit" type="button" class="btn btn-primary"              ng-click="vm.action.commitCAFile($flow)" ng-disabled="$flow.files.length < 1"              title="{{::'button-label.import' | i18next}}">{{::'button-label.import' | i18next}}          </button>       </div>    </div> </form> 

從這裡我們可以看出，組件是基於form表單的，當然你也可以基於其他dom節點上，基於表單的好處主要是在於表單的提交即submit按鈕可以直接幫到到檔案上傳的$flow.upload方法上，當使用者選擇檔案後，點擊上傳就會執行上傳方法，在整個form表單中該$flow是全域存在的，這樣我們就可以根據檔案的大小或者是否選擇檔案來確定是否允許使用者上傳，為了緩解伺服器壓力，我們一般是不會讓使用者提交一些誤操作的。

1.3.2方法處理

上傳方法：$flow.upload

上傳成功的回呼函數：

vm.action.importCAData = function (responseResult) {         console.info('importCAData');         vm.action.CAName = angular.fromJson(responseResult).data;         //var data = responseResult.data;         //data.keyPasswd = vm.cache.currentItem.keyPasswd;         var result = angular.fromJson(responseResult).result;         var errorMessage = angular.fromJson(responseResult).errorMessage;         if(result == "success"){           vm.cache.caFlag = true;           vm.cache.alert._success("Upload CA certificates successfully!", vm.alertConfig);         }else {           vm.caDisabled = false;           vm.cache.alert._error(errorMessage, vm.alertConfig);         }       } 

在這裡的處理是將後台返回的檔案相關的屬性賦值給其他變數。當我們存在其他表單項的時候，需要將該檔案的一些屬性和表單項封裝到同一個對象中發送給後台，讓後台進行一些入庫操作。
表單提交操作：

//save the form        vm.action.createItem = function () {         vm.action.data.keyPasswd = vm.cache.currentItem.keyPasswd;         vm.action.data.CAName = vm.action.CAName;         var data = {};         data.caFileName = vm.action.CAName;         data.fileName = vm.action.data.fileName;         data.from = vm.action.data.from;         data.isExpiryStatus = vm.action.data.isExpiryStatus;         data.name = vm.action.data.name;         data.to = vm.action.data.to;         data.type = vm.action.data.type;         data.keyPasswd = vm.cache.currentItem.keyPasswd;         data.usingStatus = vm.action.data.usingStatus;         data.validityStartTime = vm.action.data.validityStartTime;         data.validityStopTime = vm.action.data.validityStopTime;         amCertificateService.createItem(data).then(function success(responseResult) {             if (responseResult.errorCode == 0) {               vm.action.reset();               vm.cache.alert._success('Create radius server certificate successfully ', vm.alertConfig);             } else {               vm.cache.alert._error(responseResult.translated.errorMessageTranslated, vm.alertConfig);             }             amCertificateService.getList();           })           .catch(function fail(e) {             vm.cache.alert._error("");           })           .finally(function () {             vm.action.reset();           });       }; 

1.4幕後處理

後天處理我就不多說了，自從搞上了前端，背景代碼我都挺長時間沒動過了，感覺挺悲哀的。但是後天使用的是springmvc，springmvc的上傳類叫MultipartFile,當然你也可以使用HttpServletRequest ，這個裡面也可以轉為上面的那個類。這個網上一搜一大片，我就不多說了。至此，檔案上傳功能就這樣實現了

總結

以上所述是小編給大家介紹的Angularjs上傳檔案組件flowjs功能，希望對大家有所協助，如果大家有任何疑問請給我留言，小編會及時回複大家的。在此也非常感謝大家對幫客之家網站的支援！