AngularJS 檔案上傳 的功能你了解的多少？幾分鐘就讓你了解angularjs的檔案上傳

這篇文章主要的講述了angularjs的檔案上傳功能，大家又不懂都可以來看，希望能幫助到大家。下面就讓我們一起來看這篇文章吧

問題描述附件上傳

檢定結果以附件形式上傳。

這裡先不考慮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函數執行的，所以無效。

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中的內容了。

    

        附件         

            <input>         

        

            清除         

    

    <input>     

設定為reset之後就會出現新的問題，因為是在一個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群組需要被驗證。 （想看更多就到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中文網其他相關文章！