Angular angular-file-upload文件上傳的示例代碼
問題描述
附件上傳
檢定結果以附件形式上傳。

這里先不考慮api。
實現(xiàn)的任務就是,點擊選擇文件,選擇之后可以清楚掉該文件。
插件介紹
用到了項目映入過的一個插件,angular-file-upload。
angular-file-upload AP:https://github.com/nervgh/angular-file-upload
進入正題,我們如何安裝,還是老樣子安利波npm
npm install angular-file-upload
插件很簡單,就是一個指令,我們在它提供給我們的指令中聲明一個uploader對象,這個對象表示在不同的時間下要執(zhí)行什么操作,另一種觀察者模式。
功能實現(xiàn)
使用指令
官網(wǎng)給出了該指令的很多種用法,這里選擇最簡單的,Single,單文件上傳。

<input type="file" nv-file-select uploader="uploader"/>
一個file類型的input,使用nv-file-select指令,傳給該指令一個uploader對象作為參數(shù)。
很簡單的邏輯,新建一個FileUploader的對象,然后重寫它的onAfterAddingFile方法,就是在文件添加完成之后,也就是點擊選擇文件,選中文件,點擊完成之后執(zhí)行的一個方法。
此方法中我們直接對文件進行上傳操作。
// 新建文件上傳實例
self.uploader = new FileUploader();
// 重寫文件添加后的方法
self.uploader.onAfterAddingFile = function(fileItem) {
// 打印日志
if (config.debug) { console.info('onAfterAddingFile', fileItem); }
// 上傳文件
self.upload(fileItem);
};
// 傳給視圖
$scope.uploader = self.uploader;
如果將文件上傳封裝成指令,以上代碼應該方法指令的controller方法中執(zhí)行?。?!
關于指令中的compile、controller、link的執(zhí)行詳解,請參考正確地使用 Angular Directive 中的 compile,controller 與 link。
原因分析
可能是nv-file-select指令在實現(xiàn)時在link函數(shù)中進行各種事件的綁定,綁定時就需要我們的uploader對象。
而如果我們將其放在了link函數(shù)里,該指令的link函數(shù)是晚于nv-file-select的link函數(shù)執(zhí)行的,所以無效。
upload
// 上傳文件
self.upload = function(data) {
// 上傳文件
AttachmentService.uploadFile(data._file)
.then(function success(response) {
// 將上傳成功的附件綁定再ngModel中
$scope.ngModel = response.data;
// 顯示上傳按鈕
self.showClear();
}, function error() {
// 提示用戶上傳失敗
sweetAlert.swal({
title: "對不起",
text: "上傳的附件不能大于1M,請確認附件是否大于1M"
});
});
};
清空
用戶上傳錯了文件怎么辦呢?添加一個清空按鈕,如果上傳文件之后就顯示。
// 清空選中文件
self.clear = function() {
self.deleteFile(scope.ngModel.id);
};
// 刪除附件
self.deleteFile = function(id) {
AttachmentService.deleteFile(id, function success() {
// 將附件賦為空對象
scope.ngModel = undefined;
// 隱藏清空按鈕
self.hideClear();
});
};
scope.clear = self.clear;
但是這里會有一個問題,這里僅僅是刪除了服務器上的附件,而文件的選中效果還是在的,這里還是顯示選中的文件名的。

解決方案就是用一個form把它套起來,將button的類型設置為reset,點擊按鈕時,就會清空input中的內容了。
<form name="formInner" novalidate>
<fieldset>
<label class="col-sm-4 control-label">附件</label>
<div class="col-sm-4">
<input type="file" nv-file-select uploader="uploader"/>
</div>
<div class="col-md-4">
<button type="reset" ng-if="params.showClearOrNot" ng-click="clear()" class="btn btn-xs btn-default">清除</button>
</div>
</fieldset>
</form>
<form> <input ng-model="xxx" /> <yunzhi-upload-file ng-model="work.apply.attachment"></yunzhi-upload-file> </form>
設置為reset之后就會出現(xiàn)新的問題,因為是在一個form表單里套的這個指令,所以reset,將其他的也都清空了。
ng-form
拿ng-form解決了問題。
這是ng-form指令的官方解釋:
HTML does not allow nesting of form elements. It is useful to nest forms, for example if the validity of a sub-group of controls needs to be determined.
HTML不允許嵌套form元素,ng-form被用來嵌套form,如果一個子的form組需要被驗證。
但是ng-form并沒有實現(xiàn)form的功能,ng-submit就不能使用,想想這樣設計也是合理的,如果ng-form也能submit,嵌套form,一個submit的button,提交誰?
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
AngularJS中實現(xiàn)顯示或隱藏動畫效果的方式總結
AngularJS 是一組用于創(chuàng)建單頁Web應用的豐富框架,給構建豐富交互地應用帶來了所有功能,其中一項主要的特性是Angular對動畫的支持。下面通過本文給大家介紹AngularJS中實現(xiàn)顯示或隱藏動畫效果的方式總結,對angularjs動畫效果相關知識感興趣的朋友一起學習2015-12-12
Angularjs中的事件廣播 —全面解析$broadcast,$emit,$on
下面小編就為大家?guī)硪黄狝ngularjs中的事件廣播 —全面解析$broadcast,$emit,$on。小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考,一起跟隨小編過來看看吧2016-05-05

