檢定結果以附件形式上傳。
這裡先不考慮api。
實現的任務就是，點選選擇文件，選擇之後可以清楚掉該文件。
用到了專案映入過的一個插件，angular-file-upload。
外掛很簡單，就是一個指令，我們在它提供給我們的指令中聲明一個uploader對象，這個對象表示在不同的時間下要執行什麼操作，另一種觀察者模式。
官網給了該指令的很多種用法，這裡選擇最簡單的，Single，單一檔案上傳。
<input>
一個file類型的input，使用nv-file-select指令，傳給該指令一個uploader物件作為參數。
很簡單的邏輯，新建一個FileUploader的對象，然後重寫它的onAfterAddingFile方法，就是在文件添加完成之後，也就是點擊選擇文件，選取文件，點擊完成之後執行的一個方法。
此方法中我們直接對檔案進行上傳操作。
// 新建文件上传实例
self.uploader = new FileUploader();
// 重写文件添加后的方法
self.uploader.onAfterAddingFile = function(fileItem) {
// 打印日志
if (config.debug) { console.info('onAfterAddingFile', fileItem); }
// 上传文件
self.upload(fileItem);
};
// 传给视图
$scope.uploader = self.uploader;如果將檔案上傳封裝成指令，以上程式碼應該方法指令的controller方法中執行！ ！ ！
關於指令中的compile、controller、link的執行詳解，請參考正確地使用Angular Directive 中的compile ，controller 與link。
可能是nv-file-select指令在實作時在link函數中進行各種事件的綁定，綁定定時就需要我們的uploader物件。
而如果我們將其放在了link函數裡，該指令的link函數是晚於nv-file-select的link函數執行的，所以無效。
// 上传文件
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中的內容了。
設定為reset之後就會出現新的問題，因為是在一個form表單裡套的這個指令，所以reset ，將其他的也都清空了。
拿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群組需要被驗證。 （想看更多就到PHP中文網angularjs學習手冊中學習）
但是ng-form並沒有實作form的功能，ng-submit就不能使用，想想這樣設計也是合理的，如果ng-form也能submit，嵌套form，一個submit的button，提交誰？
這裡只是最簡單的一種應用場景，如果需要上傳幾十M的一個大檔案呢？
如果是學習過電腦網路的小夥伴，看到這個實作是不是覺得很熟悉？這不就是路由器當發現另一個網路無法一次承載這麼多的數據，然後做的事嗎？原理電腦網絡，還是有點用的。
就像上次設計yunzhiTrueOrFalse過濾器時，我明白了資料結構的本質。資料結構其實就是資料「結構」。
我們說Map是一種資料結構，但是沒有HashMap我們能不能完成任務呢？
也能，兩個數組，一個存號key，一個存號value，for循環唄。然後Java社群發現這種的應用場景太多，用起來太麻煩，就在JDK中實作了這樣的一種資料結構HashMap。 (這是我編的故事啊！)
抽象過後，一切更方便，如果某一天你發現已有的資料結構不能滿足你的場景需求，翻開書本，自己設計一個。
這篇文章到這就結束了，想看更多推薦到PHP中文網angularjs參考手冊中學習。
以上是AngularJS 檔案上傳 的功能你了解的多少？幾分鐘就讓你了解angularjs的檔案上傳的詳細內容。更多資訊請關注PHP中文網其他相關文章！
