這篇文章給大家介紹如何在A(yíng)ngular中使用angular-file-upload上傳文件，內(nèi)容非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對(duì)大家能有所幫助。

創(chuàng)新互聯(lián)建站是一家集網(wǎng)站建設(shè),納雍企業(yè)網(wǎng)站建設(shè),納雍品牌網(wǎng)站建設(shè),網(wǎng)站定制,納雍網(wǎng)站建設(shè)報(bào)價(jià),網(wǎng)絡(luò)營(yíng)銷(xiāo),網(wǎng)絡(luò)優(yōu)化,納雍網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競(jìng)爭(zhēng)力?？沙浞譂M(mǎn)足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專(zhuān)業(yè)、時(shí)尚、前沿，時(shí)刻以成就客戶(hù)成長(zhǎng)自我，堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。

附件上傳

檢定結(jié)果以附件形式上傳。

這里先不考慮api。

實(shí)現(xiàn)的任務(wù)就是，點(diǎn)擊選擇文件，選擇之后可以清楚掉該文件。

插件介紹

用到了項(xiàng)目映入過(guò)的一個(gè)插件，angular-file-upload。

angular-file-upload AP：https://github.com/nervgh/angular-file-upload

進(jìn)入正題，我們?nèi)绾伟惭b，還是老樣子安利波npm

npm install angular-file-upload

插件很簡(jiǎn)單，就是一個(gè)指令，我們?cè)谒峁┙o我們的指令中聲明一個(gè)uploader對(duì)象，這個(gè)對(duì)象表示在不同的時(shí)間下要執(zhí)行什么操作，另一種觀(guān)察者模式。

功能實(shí)現(xiàn)

使用指令

官網(wǎng)給出了該指令的很多種用法，這里選擇最簡(jiǎn)單的，Single，單文件上傳。

<input type="file" nv-file-select uploader="uploader"/>

一個(gè)file類(lèi)型的input，使用nv-file-select指令，傳給該指令一個(gè)uploader對(duì)象作為參數(shù)。

很簡(jiǎn)單的邏輯，新建一個(gè)FileUploader的對(duì)象，然后重寫(xiě)它的onAfterAddingFile方法，就是在文件添加完成之后，也就是點(diǎn)擊選擇文件，選中文件，點(diǎn)擊完成之后執(zhí)行的一個(gè)方法。

此方法中我們直接對(duì)文件進(jìn)行上傳操作。

// 新建文件上傳實(shí)例
self.uploader = new FileUploader();

// 重寫(xiě)文件添加后的方法
self.uploader.onAfterAddingFile = function(fileItem) {
  // 打印日志
  if (config.debug) { console.info('onAfterAddingFile', fileItem); }
  // 上傳文件
  self.upload(fileItem);
};

// 傳給視圖
$scope.uploader = self.uploader;

如果將文件上傳封裝成指令，以上代碼應(yīng)該方法指令的controller方法中執(zhí)行?。?！

關(guān)于指令中的compile、controller、link的執(zhí)行詳解，請(qǐng)參考正確地使用 Angular Directive 中的 compile，controller 與 link。

原因分析

可能是nv-file-select指令在實(shí)現(xiàn)時(shí)在link函數(shù)中進(jìn)行各種事件的綁定，綁定時(shí)就需要我們的uploader對(duì)象。

而如果我們將其放在了link函數(shù)里，該指令的link函數(shù)是晚于nv-file-select的link函數(shù)執(zhí)行的，所以無(wú)效。

upload

// 上傳文件
self.upload = function(data) {
  // 上傳文件
  AttachmentService.uploadFile(data._file)
    .then(function success(response) {
        // 將上傳成功的附件綁定再ngModel中
        $scope.ngModel = response.data;
        // 顯示上傳按鈕
        self.showClear();
      }, function error() {
        // 提示用戶(hù)上傳失敗
        sweetAlert.swal({
          title: "對(duì)不起",
          text: "上傳的附件不能大于1M，請(qǐng)確認(rèn)附件是否大于1M"
        });
      });
};

清空

用戶(hù)上傳錯(cuò)了文件怎么辦呢？添加一個(gè)清空按鈕，如果上傳文件之后就顯示。

// 清空選中文件
self.clear = function() {
  self.deleteFile(scope.ngModel.id);
};

// 刪除附件
self.deleteFile = function(id) {
  AttachmentService.deleteFile(id, function success() {
    // 將附件賦為空對(duì)象
    scope.ngModel = undefined;
    // 隱藏清空按鈕
    self.hideClear();
  });
};

scope.clear = self.clear;

但是這里會(huì)有一個(gè)問(wèn)題，這里僅僅是刪除了服務(wù)器上的附件，而文件的選中效果還是在的，這里還是顯示選中的文件名的。

解決方案就是用一個(gè)form把它套起來(lái)，將button的類(lèi)型設(shè)置為reset，點(diǎn)擊按鈕時(shí)，就會(huì)清空input中的內(nèi)容了。

<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>

設(shè)置為reset之后就會(huì)出現(xiàn)新的問(wèn)題，因?yàn)槭窃谝粋€(gè)form表單里套的這個(gè)指令，所以reset，將其他的也都清空了。

ng-form

拿ng-form解決了問(wèn)題。

這是ng-form指令的官方解釋?zhuān)?/p>

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被用來(lái)嵌套form，如果一個(gè)子的form組需要被驗(yàn)證。

關(guān)于如何在A(yíng)ngular中使用angular-file-upload上傳文件就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到。

當(dāng)前題目：如何在A(yíng)ngular中使用angular-file-upload上傳文件
URL鏈接：http://chinadenli.net/article40/iheoeo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供全網(wǎng)營(yíng)銷(xiāo)推廣、網(wǎng)頁(yè)設(shè)計(jì)公司、外貿(mào)建站、電子商務(wù)、用戶(hù)體驗(yàn)、服務(wù)器托管

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)