Angularjs上傳文件組件flowjs功能
現(xiàn)在的項目,無論代銷,幾乎不會缺省的一個功能就是上傳下載功能,今天談一談使用AngularJS+bootsrtap下的上傳下載功能。
1.angularjs和flowjs
angularjs我在其他的博客里面也講到了它的其他的一些用處,只是沒有做過系統(tǒng)的說明,在這里也不打算一一介紹。這個在一些官網(wǎng)上都有說明,我也會花一點(diǎn)時間去整理一下angularjs的知識點(diǎn)以及在使用到angularjs需要注意的或者我在項目中碰到的一些問題,會在其他博客中跟大家分享。這里我只簡單的一筆帶過,主要是flowjs這個組件的使用。順便一提,還得夸夸angularjs的強(qiáng)大。
1.1 flowjs
https://github.com/flowjs/flow.js,這個網(wǎng)站上是我見到過對flowjs這部分描述最清楚的API了,上面列舉了flowjs作為angular下的上傳組件的使用以及屬性的詳細(xì)講解。我主要列舉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>
這是一個最簡單的實(shí)現(xiàn)上傳功能的代碼,里面包含了一些屬性和方法,其他的一些參數(shù)這里暫時用不到,感興趣的請到上面的網(wǎng)站去查閱。
<span style="font-size:18px;" deep="8">{ "flow-init":"初始化上傳的屬性值", "target":"請求接口路徑,對應(yīng)到后臺server端請求", "singleFile":"是否選擇單文件上傳,因?yàn)閒lowjs默認(rèn)是支持多文件上傳的, 當(dāng)然也有的需求會需要單文件上傳,取值為true或false." "true是只支持單文件上傳,false支持多文件上傳,記得一定是boolean類型的." "testChunks":"flowjs上傳是分片的,所以他不會只往后臺發(fā)送一次請求,如果文件比較大, 它會分多片上傳,然后等所有的都上傳文成," "他會去合成一個整體的文件,而這個屬性設(shè)置為true之后就會去檢測一下該請求在后臺是否開啟, 如果開了就會在下次即使重啟或者瀏覽器奔潰后繼續(xù)上傳,我的理解應(yīng)該是續(xù)傳吧", "flow-files-added":"可以用來限制上傳文件的格式,比如excel,pem,jpeg,png等格式要求!!{pem:1,png:1}", "flow-file-success":"上傳成功之后的回調(diào)函數(shù),你可以在這里面處理上傳之后的其他操作。比如使用這個組件的時候會和其他表單項一起提交", "這時我們需要將文件的上傳路徑,文件名字和其他表單項一起提交到后臺,而該組件不支持參數(shù)傳遞,也就是使用這個組件", "分為兩步,第一步:點(diǎn)擊上傳,先將文件上傳到服務(wù)器指定路徑。同時后臺返回文件路徑,文件大小,文件名稱等與文件相關(guān)的信息", "第二步:將后臺返回的文件信息和其他表單項一起封裝到一個對象中,發(fā)送給后臺。后臺接到請求,將上傳信息進(jìn)行入庫操作" }</span>
1.3實(shí)例
上面已經(jīng)對flowjs進(jìn)行了一個說明,在這里舉個例子來使用一下該組件。關(guān)于引入js,我就不詳細(xì)說了。
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表單的,當(dāng)然你也可以基于其他dom節(jié)點(diǎn)上,基于表單的好處主要是在于表單的提交即submit按鈕可以直接幫到到文件上傳的$flow.upload方法上,當(dāng)用戶選擇文件后,點(diǎn)擊上傳就會執(zhí)行上傳方法,在整個form表單中該$flow是全局存在的,這樣我們就可以根據(jù)文件的大小或者是否選擇文件來確定是否允許用戶上傳,為了緩解服務(wù)器壓力,我們一般是不會讓用戶提交一些誤操作的。
1.3.2方法處理
上傳方法:$flow.upload
上傳成功的回調(diào)函數(shù):
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); } }
在這里的處理是將后臺返回的文件相關(guān)的屬性賦值給其他變量。當(dāng)我們存在其他表單項的時候,需要將該文件的一些屬性和表單項封裝到同一個對象中發(fā)送給后臺,讓后臺進(jìn)行一些入庫操作。
表單提交操作:
//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,當(dāng)然你也可以使用HttpServletRequest ,這個里面也可以轉(zhuǎn)為上面的那個類。這個網(wǎng)上一搜一大片,我就不多說了。至此,文件上傳功能就這樣實(shí)現(xiàn)了
總結(jié)
以上所述是小編給大家介紹的Angularjs上傳文件組件flowjs功能,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關(guān)文章
AngularJS與后端php的數(shù)據(jù)交互方法
今天小編就為大家分享一篇AngularJS與后端php的數(shù)據(jù)交互方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08AngularJS中的路由使用及實(shí)現(xiàn)代碼
本篇文章主要介紹了AngularJS中的路由使用及實(shí)現(xiàn)代碼,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-10-10在AngularJS應(yīng)用中實(shí)現(xiàn)一些動畫效果的代碼
這篇文章主要介紹了在AngularJS應(yīng)用中實(shí)現(xiàn)一些動畫效果的代碼,AngularJS是一款熱門的JavaScript庫,需要的朋友可以參考下2015-06-06AngularJS ng-controller 指令簡單實(shí)例
本文主要介紹AngularJS ng-controller 指令,這里對ng-controller指令資料的整理,并附代碼示例和效果圖,有需要的朋友看下2016-08-08