文件select和drop
使用插件則ngf-select 或 ngf-drop 必須強制使用一個.
ngf-select選擇相關(guān)的其它指令经备，一般使用*作為前綴
ngf-drop拖放相關(guān)的其它指令访惜，一般使用+作為前綴
具體使用
// 使用標(biāo)簽可以為下面3個中的任意1個
<div|button|input type="file"|ngf-select|ngf-drop>
</div|button|input>
1.標(biāo)簽中的屬性
#1
ngf-select="" 或者 ngf-select="upload($files, ...)" // 方法當(dāng)文件選中或被清除時被調(diào)用
ngf-drop="" 或者 ngf-drop="upload($files, ...)" // 當(dāng)文件被放置的時候方法被調(diào)用
可以使用 ng-model 或者 ngf-change 來代替下面函數(shù)中的參數(shù)
#2
ngf-change="upload($files, $file, $newFiles, $duplicateFiles, $invalidFiles, $event)" // 當(dāng)文件被選中，放置或清除時方法調(diào)用
ng-model="myFiles" // 綁定有效選擇或放置的文件到作用域模型喇嘱， 可以是數(shù)組或字符串， 這個由 `ngf-multiple` 和 `ngf-keep`值決定
#3
// updateOn 用于禁用點擊重置或粘貼更新怜瞒，瀏覽器圖片放置等
// allowInvalid 默認(rèn)值為false, 允許模型(model)中存在無效文件
// debounce 用于延時模型更新(單位為ms)
ng-model-options="{updateOn: 'change click drop dropUrl paste', allowInvalid: false, debounce: 0}"
// 將無效選擇的文件或放置文件綁定到模型上
ng-model-invalid="invalidFile(s)"
// 在模型改變， 驗證和resize之前,在文件被選擇或放置之后被調(diào)用
ngf-before-model-change="beforeChange($files, ...)"
#4
// 禁用這個元素
ng-disabled="boolean"
// 默認(rèn)值為false, 對這個元素禁止選擇/放置文件
ngf-select-disabled="boolean"
ngf-drop-disabled="boolean"
// 默認(rèn)值為false,是否允許選擇多個文件
ngf-multiple="boolean"
// 默認(rèn)值為false, 是否保留先前模型中的文件和后面添加的新文件
// 'distinct' 移除重復(fù)的文件, '$newFile', '$duplicateFiles' 在 ngf-change/select/drop 函數(shù)中設(shè)置
ngf-keep="true|false|'distinct'"
#5
// 默認(rèn)值為false, 用于旋轉(zhuǎn)包含 exif orientation數(shù)據(jù)的jpeg圖片文件
ngf-fix-orientation="boolean"
#6
// 允許移動設(shè)備通過相機來添加圖片
*ngf-capture="'camera'" 或者 *ngf-capture="'other'"
// 標(biāo)準(zhǔn)HTML接收的屬性俩檬，瀏覽器選擇時彈出窗口
*ngf-accept="'image/*'"
// 默認(rèn)值為true, 允許放置文件，只針對chrome webkit 瀏覽器
+ngf-allow-dir="boolean"
// 默認(rèn)值為false,在文件放置數(shù)據(jù)中包含路徑
+ngf-include-dir="boolean"
#7
// 默認(rèn)值為 'dragover'碾盟， 拖動時添加css class， 可以是一個字符串技竟，或一個函數(shù)返回類名或json對象
// 'accept/reject' class 只用于在chrome
+ngf-drag-over-class="{pattern: 'image/*', accept: 'acceptClass', reject: 'rejectClass', delay: 100}"
或者 "'myDragOverClass'"
或者 "'calcDragOverClass($event)'"
// 依據(jù)瀏覽器是否支持文件drag&drop來設(shè)置作用域的值為true或者false
+ngf-drop-available="dropSupported"
// 默認(rèn)值為false, 是否冒泡 拖拽事件
+ngf-stop-propagation="boolean"
// 默認(rèn)值為false, 隱藏元素冰肴。如果文件拖拽不存在
+ngf-hide-on-drop-not-avaliable="boolean"
#8
ngf-resize="{width: 100, height: 100, quality: .8, type="image/jpeg",
ratio: '1:2', centerCrop: true, pattern=".jpg", restoreExif: false
}"
// 或者
// 函數(shù)返回一個promise
// resolve則獲取選項: resize圖片大小為給定的寬高或ratio; quality為可選的，范圍為0.1-1.0
// type: 可選,轉(zhuǎn)換為指定的圖片格式
// centerCrop: 默認(rèn)值為false, 不對圖片進行裁剪榔组，將適應(yīng)給定的寬高或比率熙尉； 設(shè)置為true將不適應(yīng)給定寬高的圖片進行裁剪，可能導(dǎo)致圖片寬或高小于給定的寬或高
// pattern：只對名字或類型相匹配的文件進行resize, 和'ngf-pattern'類似
// restoreExif: 默認(rèn)值為true, 將修復(fù)resize 圖片的exif信息
ngf-resize="resizeOptions()"
// 只用這個函數(shù)返回為true才使用 'ngf-resize'屬性
ngf-resize-if="$width > 1000 || $height > 1000"
或者 "resizeCondition($file, $width, $height)"
// 默認(rèn)值為false, 如果設(shè)置為true,則所有驗證將在圖片被rezise之后進行搓扯，因此在resize之前的驗證錯誤將會被忽略
ngf-validate-after-resize="boolean"
#9
驗證
// 允許選擇或放置的最大文件數(shù)量检痰，驗證錯誤名: maxFiles
ngf-max-files="10"
// 允許選擇文件類型，逗號分割用于過濾文件名和類型
// 排除不允許的文件類型使用 '!', 驗證錯誤名: pattern
ngf-pattern="'.pdf,.jpg,video/*, !.jop'"
// 文件大小的驗證
ngf-min-size
ngf-max-size
ngf-max-total-size = "100"(單位為bytes) 或者 "'10KB'" 或者 "'10MB'" 或者 "'10GB'"
// 對圖片尺寸進行驗證
ngf-min-height
ngf-max-height
ngf-min-weight
ngf-max-weight = "1000"(單位 px)
ngf-ratio="8:10, 1.6" // 指定的image ratio格式
ngf-dimensions="$width > 1000 || $height > 1000"
"validateDimension($file, $width, $height)"
// 對視頻或音頻文件進行驗證
ngf-min-duration
ngf-max-duration= "100.5"(單位 s) 或者 "'10s'" 或者 "'10m'" 或者 "'10h'"
ngf-duration="$duration > 1000"
"validateDuration($file, $duration)"
// 上面所有驗證的簡寫
ngf-validate="{size: {min: 10, max: '20MB'},
width: {min: 100, max: 10000},
height: {min: 100, max: 300},
ratio: '2x1',
duration: {min: '10s', max: '5m'},
pattern: '.jpg'
}"
// 自定義驗證函數(shù)锨推，返回布爾值或包含錯誤的string
ngf-validate-fn="validate($file)"
// 自定義驗證函數(shù)铅歼，返回一個promise
ngf-validate-async-fn="validate($file)"
// 默認(rèn)值為false,如果設(shè)置為true, 'file.$error' 將被設(shè)置
// 例如圖片加載錯誤或瀏覽器不支持的視頻
// 默認(rèn)情況會將設(shè)文件是有效的，如果瀏覽器不能計算出duration或dimension
ngf-validate-force="boolean"
// 忽略指定驗證類型的錯誤
ngf-ignore-invalid="'pattern maxSize'"
#10
其它
<div|input|button ngf-no-file-drop>文件拖拽不支持</div|...>
// 將文件轉(zhuǎn)換為base64 data url
<a href="file | ngfDataUrl">image</a>
2.文件預(yù)覽
使用方式:
<img|audio|video|div
// 屬性
>
可選屬性有:
// 預(yù)覽選擇的文件换可，設(shè)置src屬性為文件的data url
*ngf-src="file"
// 給文件設(shè)置背景圖片樣式
*ngf-background="file"
// 在設(shè)置為src或背景圖片前resize 圖片(只對圖片有效)
ngf-resize="{width: 20, height: 20, quality: 0.9}"
// 強制base64 url代替對象url, 默認(rèn)值為false
ngf-no-object-url="true or false"
另外對圖片:
<div|span|...
*ngf-thumbnail="file" // 產(chǎn)生圖片文件的縮略圖
ngf-size="{width: 20, height: 20, quality: 0.9}" // 圖片將縮放為這個尺寸
ngf-as-background="boolean" // 如果為true,則設(shè)置為背景圖片而不是src屬性
>
3.上傳服務(wù) Upload service
var upload = Upload.upload({
// 配置信息
})
配置信息
#1 上傳地址
*url: 'server/upload/url', // 可以為 upload.php腳本椎椰，node.js路由， 或者 servlet url
#2 上傳數(shù)據(jù)
*data: {key: file, otherInfo: uploadInfo}
// 指定文件和發(fā)送到服務(wù)器的可選數(shù)據(jù)沾鳄，每個包含嵌套對象的字段將以 'form data multipart' 形式發(fā)送
// 示例
{pic: file, username: username}
{files: files, otherInfo: {id: id, person: person, ...}}
{profiles: {
[
{pic: file1, username: username1},
{pic: file2, username: username2}
] // 嵌套數(shù)據(jù)包含多個文件(html5)
}}
{file: file, info: Upload.json({id: id, name: name, ...})} // 將字段以json字符串格式發(fā)送
{picFile: Upload.rename(file: 'profile.jpg'), title:tile}
#3 請求方式
method: 'POST'(默認(rèn)值) || 'PUT'(HTML5)
#4 頭文件
headers: {'Authorization': 'xxx'} // (HTML5)
#5 是否帶有憑證
withCredentials: boolean
#6 可恢復(fù)上傳(HTML5)
resumeSizeUrl: '/upload/size/url?file=' + file.name // 目前上傳到服務(wù)器文件的大小
resumeSizeResponseReader: function(data) {return data.size;} // 讀取上傳的文件大小從 resumeSizeUrl GET response中
resumeSize: function() {return promise;} // 返回一個promise慨飘，用于計算上傳到服務(wù)器文件的大小
resumeChunkSize: 1000 || '10KB' || '10MB' // 以塊上傳指定的文件大小
#7 是否取消進度條
disableProgress: boolean // 默認(rèn)值為false
#8 其它 angular '$http()' 選項可以這這里使用
上面的 var upload是一個promise，有如下的一些方法
upload.then(function(resp) {
// 文件上傳成功
console.log('file ' + resp.config.data.file.name + 'is uploaded successfully. Response: ' + resp.data);
}, function(resp) {
// 處理錯誤
}, function(evt) {
// 進度通知
console.log('progress: ' + parseInt(100.0 * evt.loaded / evt.total) + '% file : ' + evt.config.data.file.name);
});
// 捕獲異常
upload.catch(errorCallback)
upload.finally(callback, notifyCallback);
// 訪問底層XMLHttpRequest或者添加事件listeners
upload.xhr(function(xhr) {
xhr.upload.addEventListener(...)
});
// 取消或終止上傳過程
其它的上傳方式和其它操作
發(fā)送文件二進制文件的content-type, 可用于將文件上傳到CouchDB, imgur等译荞，html5 FileReader接口是必要的瓤的， 這相當(dāng)于angular $http(),但是允許你html5瀏覽器的progress事件進行監(jiān)聽
Upload.http({
url: '/server/upload/url',
headers: {
'Content-Type': file.type
},
data: file
})
// 給ngf-select, ngf-drop指令設(shè)置默認(rèn)值
Upload.setDefaults({ngfMinSize: 2000, ngfMaxSize: 200000, ....0})
// 轉(zhuǎn)換單個文件或數(shù)組文件為base64 data url形式的單個或數(shù)組文件
// 用于在json內(nèi)部以base64格式發(fā)送給數(shù)據(jù)庫
Upload.base64DataUrl(files).then(function(urls){...})
// 將文件轉(zhuǎn)換為二進制url對象或者base64數(shù)據(jù)url 依據(jù) 'disallowObjectUrl' 值
Upload.dataUrl(file, boolean).then(function(url) {...});
// 獲取圖片文件的圍度
Upload.imageDimensions(file).then(function(dimensions){console.log(dimensions.width, dimensions.height);});
// 獲取 audio/video 時長
Upload.mediaDuration(file).then(function(durationInSeconds){...});
// 修改圖片尺寸， 返回一個promiase
// 選項 width, height, quality, type, radio, centerCrop, resizeIf, restoreExif
// resizeIf(width, height) 返回布爾值
Upload.resize(file, options).then(function(resizeFile){...})
// 返回布爾值吞歼，是否瀏覽器支持圖片尺寸縮放
Upload.isResizeSupported()
// 是否瀏覽器支持可繼續(xù)上傳圈膏，返回布爾值
Upload.isResumeSupported()
// 給上傳文件重命名
Upload.rename(file, newName)
// 將對象轉(zhuǎn)換為application/json文件類型的二進制對象(HTML5)
Upload.jsonBlob(obj)
// 和angular.toJson(obj)一樣
Upload.json(obj)
// 如果正在上傳則返回true
Upload.isUploadInProgress()
// 檢查對象是否為文件，可用于 Upload.upload()/http() 中
Upload.isFile(obj)
4.注意事項
ng-model
ng-model 的值將為單一文件而不是數(shù)組浆熔，如果全部滿足下列情況：
-
ngf-multiple沒有設(shè)置或設(shè)置為false -
multiple: 沒有設(shè)置該屬性 -
ngf-keep: 沒有設(shè)置或設(shè)置為false
validation
當(dāng)表單中指定的任何驗證指令生效本辐，我們可以通過 myForm.myFileInputName.$error.<validate error name> 使用驗證值, 例如 form.file.$error.pattern.如果允許選擇多個文件，可以指定 ngf-model-invalid="invalidFiles",將無效文件賦給模型医增，通過 file.$error 找到錯誤和file.$errorParam找到錯誤描述慎皱。可以使用angular的 ngf-model-option="{allowInvalidL: true}" 允許給ng-model設(shè)置無效文件
上傳多個文件
只對 HTML5 FormData瀏覽器(非IE8-9), 有一個數(shù)組的文件或超過一個文件在 data 以一個請求發(fā)送他們叶骨。非html5瀏覽器由于falsh限制茫多，只能一次請求上傳一個文件『龉簦可以迭代文件天揖，一個一個的上傳文件
Upload.setDefaults(options): 如果有多個文件選擇或拖拽夺欲，可以給它們設(shè)置默認(rèn)值。 options是一個json對象今膊，使用camalCase命名
拖拽樣式
對于文件拖拽些阅， ngf-drag-over-class 能夠用于給drop區(qū)域添加樣式“呋＃可以是一個依據(jù)$event返回class name的函數(shù)市埋。 默認(rèn)是 dragover字符串。只有chrome可以是一個json對象 {accept: 'a', 'reject': 'r', pattern: 'image/*', delay: 10}
5.老瀏覽器
對于不支持HTML5 FormData(IE8, IE9)的瀏覽器恕刘，將會使用 FileAPI 模塊缤谎。注意需要在瀏覽器中安裝flash,因為FileAPI需要使用Flash上傳文件。
有2個文件： FileAPI.min.js, FileAPI.flash.swf 將被模塊按需加載(如果瀏覽器支持html5表單數(shù)據(jù)就沒必要包含在html中)褐着】涝瑁可以將這2個文件放在服務(wù)器angular-file-upload-shim(.min).js旁，自動的從相同的路徑加載或者指定這些文件所在的路徑含蓉，如果他們在不同的路徑下:
<script>
// 在 angular-file-upload-shim(.min).js之前被加載
FileAPI = {
// 只需要下面中的一個
jsPath: '/js/FileAPI.min.js/folder/', // 放本地上
jsUrl: 'yourcdn.com/js/FileAPI.min.js', // 放服務(wù)器上
// 只需要其中一個靜態(tài)路徑或flashUrl:
staticPath: '/flash/FileAPI.flash.swf/folder/',
flashUrl: 'yourcdn.com/js/FileAPI.flash.swf'
// forceLoad: true, html5: false
// noContentTimeout: 10000
}
</script>
<script src="angular-file-upload-shim.min.js"></script>
老瀏覽器已知的bug
- 由于flash的限制频敛，如果服務(wù)器沒有發(fā)送任何response body，響應(yīng)狀態(tài)碼馅扣，則將永遠(yuǎn)是
204 ''No Content,所以如果要訪問服務(wù)器上傳碼姻政，至少需要返回一個狀態(tài)碼才能正常工作 - 自定義headers，不支持
- 由于flash bug岂嗓， Server HTTP 錯誤碼400將以200返回給客戶端汁展。因此避免從服務(wù)端返回上傳響應(yīng)的結(jié)果狀態(tài)碼400，因為客戶端會以200當(dāng)作成功
- 錯誤響應(yīng)(http code >= 400) 自定義錯誤信息厌殉，由于flash食绿，將不支持
- 不允許 'PUT' 請求
