溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
現在的項目，無論代銷，幾乎不會缺省的一個功能就是上傳下載功能，今天談一談使用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 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">
<h5 class="app-heading">
upload file
</h5>
</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 " >
<div class="file-name-list" >
<p ng-repeat="file in $flow.files" >
{{$index+1}} {{file.name}}
</p>
</div>
</div>
<span class="btn btn-primary col-md-1" 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功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
