學習使用AngularJS檔案上傳控制項_AngularJS

前段時間做項目遇到一個需求是上傳檔案，大概需要實現的樣式是這樣子的，見下圖：

需要同時上傳兩個檔案。並且規定檔案格式和檔案大小。因為前端架構使用angular，且不想因為一個上傳功能又引入一個jquery，所以在網上尋找基於angular的上傳控制項，因為angular還算比較新，貌似都沒有太成熟的外掛程式，網上的教程也大多是複製粘貼，總之沒起倒多大的作用...但是皇天不負有心人，最後還是讓我遇到了這個功能強大的外掛程式，讓我有種相見恨晚的感覺呀，依靠官方文檔和師兄的協助，終於搞清楚了基本的使用方法。好東西要分享，所以現在跟大家分享一下他的使用方法，如果大家正好需要使用，希望能幫到大家。

上傳按鈕的樣式
首先我想先說一下上傳檔案的按鈕樣式，為什麼呢？大家都知道上傳會用到這個標籤。<input type="file"/>,這行代碼的預設樣式真的有點不好看，見下圖：

在一個稍微有點逼格的網站中，這樣一個樣式實在是有點損失形象了，而且如果需要在前面加一個輸入框來顯示檔案名稱的話，那預設的顯示檔案名稱的地區怎麼隱藏掉呢？別急，繼續看：

用一個a標籤包住input標籤，然後把input標籤的opacity設為0，就可以了嘛！ok，看代碼：

html：

 <div>  <input class="filename" type="text" readonly="readonly" />  <a href="javascript:;" name="file">   <input type="file" name="key"/>瀏覽  </a> </div>  <div>  <input class="filename" type="text" readonly="readonly" />  <a href="javascript:;" name="file">   <input type="file" name="key"/>瀏覽  </a> </div>

然後是css檔案：

.filename{ width: 300px; height: 30px; line-height: 30px;}a{ width: 50px; text-align: center; height: 30px; line-height: 30px; position: raletive; cursor: pointer; overflow:hidden; display: inline-block;}a input{ position: absolute: left: 0; top: 0; opacity: 0;}

大功告成了！！！你看到的樣式就變成了這樣了，見下圖：

你可以控制前面的輸入框來顯示你選擇了的檔案名稱，是不是好看多了呢？

angular-file-upload

例子中能夠找到我們需要的檔案。例子中的es5-shim.min.js檔案是為老的瀏覽器安全色而引入的，所以這個外掛程式真的很強大呀。

然後我們來一步步使用這個外掛程式來實現檔案上傳的功能吧。

這個外掛程式定義了幾個指令：nv-file-drop、nv-file-select、uploader

從單詞意思來看應該不難猜出，第一個支援檔案脫拽選擇，第二個是點擊選擇，uploader用於綁定在控制器中建立的upload對象。

html檔案

<form class="form-horizontal" name="form"> <div class="form-line">  <label>請選擇認證檔案：</label><span class="small-tip">認證檔案只支援.pem格式，檔案大小1M以內</span>  <div class="choose-file-area">   <input class="file-name" type="text" readonly="readonly" ng-model="fileItem.name"/>   <a href="javascript:;" class="choose-book">    <input type="file" name="certificate" nv-file-select uploader="uploader" ng-click="clearItems()"/>瀏覽   </a>  </div> </div> <div class="form-line">  <label>請選擇私密金鑰檔案：</label><span class="small-tip">私密金鑰檔案只支援.key格式，檔案大小1M以內</span>  <div class="choose-file-area">   <input class="file-name" type="text" readonly="readonly" ng-model="fileItem1.name"/>   <a href="javascript:;" class="choose-key">    <input type="file" name="key" nv-file-select uploader="uploader1" ng-click="clearItems1()"/>瀏覽   </a>  </div> </div> <button type="submit" ng-click="UploadFile()">提交</button></form>

首先，注意這裡需要上傳兩個檔案，所以我建立兩個upload對象，方便管理檔案和處理回呼函數。最後給上傳按鈕一個點擊事件，同時處理兩個對象的上傳事件。

控制器檔案

var app = angular.module('app', ['angularFileUpload']);app.controller('uploadController',['$scope', 'FileUploader', function($scope, FileUploader) { $scope.uploadStatus = $scope.uploadStatus1 = false; //定義兩個上傳後返回的狀態，成功獲失敗 var uploader = $scope.uploader = new FileUploader({  url: 'upload.php',  queueLimit: 1,  //檔案個數   removeAfterUpload: true //上傳後刪除檔案 }); var uploader1 = $scope.uploader1 = new FileUploader({  url: 'upload.php',  queueLimit: 1,  removeAfterUpload: true  }); $scope.clearItems = function(){ //重新選擇檔案時，清空隊列，達到覆蓋檔案的效果  uploader.clearQueue(); } $scope.clearItems1 = function(){  uploader1.clearQueue(); } uploader.onAfterAddingFile = function(fileItem) {  $scope.fileItem = fileItem._file; //添加檔案之後，把檔案資訊賦給scope }; uploader1.onAfterAddingFile = function(fileItem) {  $scope.fileItem1 = fileItem._file; //添加檔案之後，把檔案資訊賦給scope  //能夠在這裡判斷添加的檔案名稱尾碼和檔案大小是否滿足需求。 }; uploader.onSuccessItem = function(fileItem, response, status, headers) {  $scope.uploadStatus = true; //上傳成功則把狀態改為true }; uploader1.onSuccessItem = function(fileItem,response, status, headers){  $scope.uploadStatus1 = true; } $scope.UploadFile = function(){  uploader.uploadAll();  uploader1.uploadAll();  if(status){   if(status1){    alert('上傳成功！');   }else{    alert('認證成功！私密金鑰失敗！');   }  }else{   if(status1){    alert('私密金鑰成功！認證失敗！');   }else{    alert('上傳失敗！');   }  } }}])

總結
在上面的例子中，我定義了兩個upload對象是因為要上傳兩個檔案，每一次重新選擇檔案時應該覆蓋之前選好的檔案，所以如果定義一個對象時，有點不好操作覆蓋的位置，而定義兩個對象，在重新選擇的時候，完全可以先清空當前對象的檔案隊列，再添加就好了。

其實後來我發現，也可以不定義兩個upload對象，因為這個外掛程式提供了一個removeFromQueue(index)方法，index是檔案隊列數組中檔案的index值。因為是兩次選擇檔案，所以把長度控制在2，然後每次選擇的時候調用這個方法，根據位置傳入0或者1就好了。

如果需要實現同一個視窗能夠多選檔案，使用加上<input type="file" multiple="true" />即可。

如果需要限制檔案類型，可以使用<input type="file" accept="image/*" />'即可。

accept取實值型別列表：

* accept="application/msexcel"* accept="application/msword"* accept="application/pdf"* accept="application/poscript"* accept="application/rtf"* accept="application/x-zip-compressed" * accept="audio/basic"* accept="audio/x-aiff"* accept="audio/x-mpeg"* accept="audio/x-pn/realaudio"* accept="audio/x-waw"* accept="image/*"* accept="image/gif" * accept="image/jpeg"* accept="image/tiff"* accept="image/x-ms-bmp"* accept="image/x-photo-cd"* accept="image/x-png"* accept="image/x-portablebitmap"* accept="image/x-portable-greymap"* accept="image/x-portable-pixmap"* accept="image/x-rgb"* accept="text/html"* accept="text/plain"* accept="video/quicktime"* accept="video/x-mpeg2"* accept="video/x-msvideo"

這個外掛程式還提供了很多的配置參數，對象方法和回呼函數。

更多精彩內容請點擊《javascript檔案上傳操作匯總》 ，歡迎大家學習閱讀。

以上就是關於AngularJS檔案上傳控制項的使用方法介紹，希望對大家的學習有所協助。