基於AngularJs的上傳控件－angular-file-upload

今天跟大家分享的是一個依賴於angular的上傳控件。

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

需要同時上傳兩個文件。並且規定文件格式和文件大小。因為前端框架使用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: relative;
	cursor: pointer;
	overflow:hidden;
	display: inline-block;
}
a input{
	position: absolute;
	left: 0;
	top: 0;
	opacity: 0;
}

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

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

angular-file-upload

慣例，首先貼出這個插件的github地址：點這里

這是插件的api使用文檔地址：點這里

這是官方使用插件編寫的例子：點這里

例子中能夠找到我們需要的文件。例子中的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"

• 這個插件還提供了很多的配置參數，對象方法和回調函數。這可以去這里查看詳細文檔：點這里

這個插件使用方法就介紹完了，如有不對，歡迎指正交流～～～