前段時間做項目遇到一個需求是上傳文件，大概需要實現的樣式是這樣子的，見下圖：
需要同時上傳兩個文件。并且規定文件格式和文件大小。因為前端框架使用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"
這個插件還提供了很多的配置參數，對象方法和回調函數。
更多精彩內容請參考專題《ajax上傳技術匯總》，《javascript文件上傳操作匯總》和《jQuery上傳操作匯總》進行學習。
以上就是關于AngularJS文件上傳控件的使用方法介紹，希望對大家的學習有所幫助。
新聞熱點
疑難解答
