一誊垢、ng-file-upload簡介
是一款輕量級悔捶、跨瀏覽器的angular上傳文件指令
二响迂、特點
“萋怼（1）支持文件上傳進度條、取消沐绒、暫停
×┟А（2）支持文件拖放和黏貼圖像
（3）支持暫停和取消文件上傳
∪髀佟（4）支持驗證文件的類型 / 大小豹绪、圖像寬度 / 高度、視頻 / 音頻持續(xù)時間（ng-required）
∩暄邸（5）支持預覽顯示選擇的圖像瞒津、視頻、音頻
±ㄊ（6）支持CORS和直接上傳文件的二進制數(shù)據(jù)( Upload.$http() )
.....
三巷蚪、用法
示例：
html：
<script src="angular.min.js"></script>
<!-- shim is needed to support non-HTML5 FormData browsers (IE8-9)-->
<script src="ng-file-upload-shim.min.js"></script>
<script src="ng-file-upload.min.js"></script>
<div ng-app="fileUpload" ng-controller="MyCtrl"> watching model:
<div class="button" ngf-select ng-model="file">Upload using model $watch</div>
<div class="button" ngf-select ng-model="files" ngf-multiple="true" ngf-accept="'image/*" accept="image/*">Upload multiple images using model $watch</div>
<div class="button" ngf-select ngf-change="upload($file)">Upload on file change</div>
<div class="button" ngf-select ngf-change="upload($files)" ngf-multiple="true" ngf-validate="{size: {min:'10KB', max:'20MB'}}">Upload multiple with size limitation</div>
Drop File:
<div ngf-drop ng-model="files" class="drop-box" ngf-drag-over-class="dragover" ngf-multiple="true" ngf-allow-dir="true" ngf-accept="'image/*,application/pdf'">Drop Images or PDFs files here</div>
<div ngf-no-file-drop>File Drag/Drop is not supported for this browser</div>
Image thumbnail: 
Audio preview: <audio controls ngf-src="file"></audio>
Video preview: <video controls ngf-src="file"></video>
</div>
JS：
//inject directives and services.
var app = angular.module('fileUpload', ['ngFileUpload']);
app.controller('MyCtrl', ['$scope', 'Upload', function ($scope, Upload) {
$scope.$watch('file', function (file) {
$scope.upload($scope.file);
});
/* optional: set default directive values */
//Upload.setDefaults( {ngf-keep:false ngf-accept:'image/*', ...} );
$scope.upload = function (file) {
Upload.upload(
{
url: 'upload/url',
fields: {'username': $scope.username}, file: file
})
.progress(function (evt) {
var progressPercentage = parseInt(100.0 * evt.loaded / evt.total);
console.log('progress: ' + progressPercentage + '% ' + evt.config.file.name);
})
.success(function (data, status, headers, config) {
console.log('file ' + config.file.name + 'uploaded. Response: ' + data);
})
.error(function (data, status, headers, config) {
console.log('error status: ' + status);
})
};
}]);
涉及參數(shù)：
（1）文件選擇：----適用于：<button>濒翻、<div>屁柏、<input type=file>
ngf-select=“true”：默認為true,使得在這個元素上可以選擇文件
ng-model="myfiles"：將選擇的一個或多個文件與scope模型綁定（通過ngf-multiple和ngf-keep的值可以使得ng-model的值為一個數(shù)組或單個文件）
ng-model-rejected="rejfiles"：與不匹配接受通配符的丟棄文件綁定
ng-disabled="selectDisabled"：與一個boolean值綁定，來決定是否禁用文件選擇功能
ngf-change="fileSelected($files, $file, $event, $rejectedFiles)"：當文件被選擇或移除時調(diào)用
ngf-multiple="true"：默認為false有送，為true時表示可以選擇多個文件
ngf-capture="'camera'" or "'other'"：允許移動設(shè)備使用相機捕獲
accept="image/*"：標準的HTML文件接受的輸入屬性（依賴于瀏覽器）
ngf-accept=" 'image/*' "：用逗號分隔允許的MIME類型來過濾文件
ngf-validate="{
size: {min: 10, max: '20MB'},
width: {min: 100, max:10000},
height: {min: 100, max: 300},
duration: {min: '10s', max: '5m'},
accept: '.jpg'
}" // 或者 "validate($file)"
```
`ngf-keep="true" or "false"`：默認為false,保存著以前ng-model的值和追加的新文件
`ngf-keep-distinct="true" or "false"`：默認為false淌喻，如果ngf-keep設(shè)置了的話，則刪除重復的選定文件
`ngf-reset-on-click="true" or "false"`：默認為true雀摘，可以重置模型和點擊輸入
`ngf-reset-model-on-click="true" or "false"`：默認為true裸删，單擊時重置模型
(2)文件刪除：----適用于：<button>、<div>
>注：除了ngf-drop 阵赠、ng-model 涯塔、 ngf-change之一，其余屬性都是可選的
`ngf-drop="true" or "false" `：默認為true,使得在該元素上可以刪除文件
`ng-model="myFiles"`：把被刪除的文件與scope模型綁定（通過ngf-multiple和ngf-keep的值可以使得ng-model的值為一個數(shù)組或單個文件）
`ng-model-rejected="rejFiles"`：與不符合通配合而被刪除的文件綁定
`ng-disabled="dropDisabled"`：與一個boolean值綁定清蚀，來決定是否禁用文件刪除功能
`ngf-change="fileDropped($files, $file, $event, $rejectedFiles)" `：當文件被刪除時調(diào)用
`ngf-multiple="true" or "false"`：默認為false匕荸，為true時表示可以選擇多個文件
`ngf-accept="'.pdf,.jpg'"`：用逗號分隔允許的MIME類型來過濾文件
```javascript
ngf-validate="{
size: {min: 10, max: '20MB'},
width: {min: 100, max:10000},
height: {min: 100, max: 300},
duration: {min: '10s', max: '5m'},
accept: '.jpg'
}" // 或者 "validate($file)"
```
`ngf-allow-dir="true" or "false"`：默認為true，但只在goole瀏覽器下可以刪除
```javascript
ngf-drag-over-class="{
accept:'acceptClass',
reject:'rejectClass',
delay:100
}" //or "myDragOverClass" or "calcDragOverClass($event)"
//拖動css類行為：可以是一個字符串枷邪，也可以是一個函數(shù)（返回一個類名）或者是一個json對象{accept: 'c1', reject: 'c2', delay:10}榛搔，默認是 "dragover". accept和reject只可以在chrome瀏覽器并且要通過ngf-accept的檢測才可以工作，
ngf-drop-available="dropSupported"：設(shè)置scope模型的值為真或假（基于文件的拖拽和釋放）
ngf-stop-propagation="true" or "false"：默認為false东揣，是否傳播拖拽和釋放事件
ngf-hide-on-drop-not-available="true" or "false"：默認為false药薯，當文件的拖拽和釋放不被支持時隱藏元素
（3）文件預覽-----適用于<img/>、<audio>救斑、<video>
ngf-src="file"：通過設(shè)置url，預覽被選擇的文件
ngf-background="file"：設(shè)置背景圖片的樣式
ngf-no-object-url="true or false"：默認為false真屯，強制生成base64url而不是對象url
更多詳情參考：https://www.awesomes.cn/repo/danialfarid/ng-file-upload
