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

前段時間做專案遇到需求是上傳文件，大概需要實現的樣式是這樣子的，見下圖：

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

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

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

用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就好了。

如果需要實作同一個視窗能夠多選文件，使用加上即可。

如果需要限製檔案類型，可以使用'即可。

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"

這個外掛程式也提供了很多的設定參數，物件方法和回呼函數。

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