快捷導(dǎo)航

學(xué)習(xí)使用AngularJS文件上傳控件

更新時(shí)間：2016年02月16日 08:51:27 投稿：lijiao

這篇文章主要幫助大家學(xué)習(xí)使用AngularJS文件上傳控件angular-file-upload，感興趣的小伙伴們可以參考一下

前段時(shí)間做項(xiàng)目遇到一個(gè)需求是上傳文件，大概需要實(shí)現(xiàn)的樣式是這樣子的，見下圖：

需要同時(shí)上傳兩個(gè)文件。并且規(guī)定文件格式和文件大小。因?yàn)榍岸丝蚣苁褂胊ngular，且不想因?yàn)橐粋€(gè)上傳功能又引入一個(gè)jquery，所以在網(wǎng)上查找基于angular的上傳控件，因?yàn)閍ngular還算比較新，貌似都沒有太成熟的插件，網(wǎng)上的教程也大多是復(fù)制粘貼，總之沒起倒多大的作用...但是皇天不負(fù)有心人，最后還是讓我遇到了這個(gè)功能強(qiáng)大的插件，讓我有種相見恨晚的感覺呀，依靠官方文檔和師兄的幫助，終于搞清楚了基本的使用方法。好東西要分享，所以現(xiàn)在跟大家分享一下他的使用方法，如果大家正好需要使用，希望能幫到大家。

上傳按鈕的樣式
首先我想先說一下上傳文件的按鈕樣式，為什么呢？大家都知道上傳會(huì)用到這個(gè)標(biāo)簽。<input type="file"/>,這行代碼的默認(rèn)樣式真的有點(diǎn)不好看，見下圖：

在一個(gè)稍微有點(diǎn)逼格的網(wǎng)站中，這樣一個(gè)樣式實(shí)在是有點(diǎn)損失形象了，而且如果需要在前面加一個(gè)輸入框來顯示文件名的話，那默認(rèn)的顯示文件名的區(qū)域怎么隱藏掉呢？別急，繼續(xù)看：

用一個(gè)a標(biāo)簽包住input標(biāo)簽，然后把input標(biāo)簽的opacity設(shè)為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文件是為老的瀏覽器兼容而引入的，所以這個(gè)插件真的很強(qiáng)大呀。

然后我們來一步步使用這個(gè)插件來實(shí)現(xiàn)文件上傳的功能吧。

這個(gè)插件定義了幾個(gè)指令：nv-file-drop、nv-file-select、uploader

從單詞意思來看應(yīng)該不難猜出，第一個(gè)支持文件脫拽選擇，第二個(gè)是點(diǎn)擊選擇，uploader用于綁定在控制器中新建的upload對(duì)象。

html文件

<form class="form-horizontal" name="form">
 <div class="form-line">
 <label>請(qǐng)選擇證書文件：</label><span class="small-tip">證書文件只支持.pem格式，文件大小1M以內(nèi)</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>請(qǐng)選擇私鑰文件：</label><span class="small-tip">私鑰文件只支持.key格式，文件大小1M以內(nèi)</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>

首先，注意這里需要上傳兩個(gè)文件，所以我創(chuàng)建兩個(gè)upload對(duì)象，方便管理文件和處理回調(diào)函數(shù)。最后給上傳按鈕一個(gè)點(diǎn)擊事件，同時(shí)處理兩個(gè)對(duì)象的上傳事件。

控制器文件

var app = angular.module('app', ['angularFileUpload']);
app.controller('uploadController',['$scope', 'FileUploader', function($scope, FileUploader) {
 $scope.uploadStatus = $scope.uploadStatus1 = false; //定義兩個(gè)上傳后返回的狀態(tài)，成功獲失敗
 var uploader = $scope.uploader = new FileUploader({
 url: 'upload.php',
 queueLimit: 1, //文件個(gè)數(shù) 
 removeAfterUpload: true //上傳后刪除文件
 });
 var uploader1 = $scope.uploader1 = new FileUploader({
 url: 'upload.php',
 queueLimit: 1,
 removeAfterUpload: true 
 });
 $scope.clearItems = function(){ //重新選擇文件時(shí)，清空隊(duì)列，達(dá)到覆蓋文件的效果
 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; //上傳成功則把狀態(tài)改為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('上傳失??！');
  }
 }
 }
}])

總結(jié)
在上面的例子中，我定義了兩個(gè)upload對(duì)象是因?yàn)橐蟼鲀蓚€(gè)文件，每一次重新選擇文件時(shí)應(yīng)該覆蓋之前選好的文件，所以如果定義一個(gè)對(duì)象時(shí)，有點(diǎn)不好操作覆蓋的位置，而定義兩個(gè)對(duì)象，在重新選擇的時(shí)候，完全可以先清空當(dāng)前對(duì)象的文件隊(duì)列，再添加就好了。

其實(shí)后來我發(fā)現(xiàn)，也可以不定義兩個(gè)upload對(duì)象，因?yàn)檫@個(gè)插件提供了一個(gè)removeFromQueue(index)方法，index是文件隊(duì)列數(shù)組中文件的index值。因?yàn)槭莾纱芜x擇文件，所以把長度控制在2，然后每次選擇的時(shí)候調(diào)用這個(gè)方法，根據(jù)位置傳入0或者1就好了。

如果需要實(shí)現(xiàn)同一個(gè)窗口能夠多選文件，使用加上<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"

這個(gè)插件還提供了很多的配置參數(shù)，對(duì)象方法和回調(diào)函數(shù)。

更多精彩內(nèi)容請(qǐng)參考專題《ajax上傳技術(shù)匯總》，《javascript文件上傳操作匯總》和《jQuery上傳操作匯總》進(jìn)行學(xué)習(xí)。

以上就是關(guān)于AngularJS文件上傳控件的使用方法介紹，希望對(duì)大家的學(xué)習(xí)有所幫助。

您可能感興趣的文章: