<div class="col-lg-1 col-sm-1 pull-right">
<a id="fileb" href="javascript:;" name="file" ng-show="jIn">
<input type="file" nv-file-select="" uploader="uploader1" multiple /><a class="btn btn-info btn-sm" ng-show="jIn">导入</a>
</a>
</div>
//导入
var uploader1 = $scope.uploader1 = new FileUploader({
url: 'http://localhost:8080/importWorkBook?loanChannel=005',
autoUpload:true
});
// FILTERS
uploader1.filters.push({
name: 'customFilter',
fn: function(item /*{File|FileLikeObject}*/,options) {
return this.queue.length < 10;
}
});
// CALLBACKS
uploader1.onWhenAddingFileFailed = function(item /*{File|FileLikeObject}*/,filter,options) {
// console.info('onWhenAddingFileFailed',item,options);
};
uploader1.onAfterAddingFile = function(fileItem) {
// console.info('onAfterAddingFile',fileItem);
};
uploader1.onAfterAddingAll = function(addedFileItems) {
// console.info('onAfterAddingAll',addedFileItems);
};
uploader1.onBeforeUploadItem = function(item) {
// console.info('onBeforeUploadItem',item);
};
uploader1.onProgressItem = function(fileItem,progress) {
// console.info('onProgressItem',fileItem,progress);
};
uploader1.onProgressAll = function(progress) {
// console.info('onProgressAll',progress);
};
uploader1.onSuccessItem = function(fileItem,response,status,headers) {
if(response.returnMsg == "ok"){
swal({
title : "导入成功",
text : "",
type : "success",
timer: 1300,
showConfirmButton: false
});
$scope.processingInfo();
}else{
swal({
title : "导入失败",
text : "对不起,数据有误,导入失败!",
type : "error",
showConfirmButton: false
});
$scope.processingInfo();
}
// console.info('onSuccessItem',headers);
};
uploader1.onErrorItem = function(fileItem,headers) {
// console.info('onErrorItem',headers);
};
uploader1.onCancelItem = function(fileItem,headers) {
// console.info('onCancelItem',headers);
};
uploader1.onCompleteItem = function(fileItem,headers) {
// console.info('onCompleteItem',headers);
};
uploader1.onCompleteAll = function() {
// console.info('onCompleteAll');
};
// console.info('uploader',uploader);
accept="image/*"
multiple
Directives(指令)
nv-file-drop
<!--最少配置--><elementnv-file-dropuploader="{FileUploader}"></element><!--最多配置--><elementnv-file-dropuploader="{FileUploader}"options="{Object}"filters="{String}"></element>
属性uploader必须是 FileUploader的一个实例。
options可能是{FileItem}
的设置或者自定义设置。
filters可能是用,隔开的过滤器名称,比如:'filterName1,filterName2',
这些过滤器必须如下预定义:
uploader.filters.push({name:'filterName1',fn:function(){/*yourcodehere*/}}); uploader.filters.push({name:'filterName2',fn:function(){/*yourcodehere*/}});
nv-file-select
<!--最少配置--><inputtype="file"nv-file-selectuploader="{FileUploader}"/><!--最多配置--><inputtype="file"nv-file-selectuploader="{FileUploader}"options="{Object}"filters="{String}"/>
nv-file-over
<!--最少配置--><elementnv-file-overuploader="{FileUploader}"></element><!--最多配置--><elementnv-file-overuploader="{FileUploader}"over-class="{String}"></element>
Service(服务)
FileUploader
FileUploader@H_301_177@
属性
方法
addToQueuefunction(files[,options[,filters]]) {
: Add items to the queue,wherefiles
is a{FileList|File|HTMLInputElement}
,options
is an{Object}
andfilters
is a{String}
. 添加项到上传队列中,files
是{FileList|File|HTMLInputElement},
options
是{Object}
以及filters
是{String}
removeFromQueuefunction(value) {
: Remove an item from the queue,monospace;font-size:13.6000003814697px;">valueis{FileItem}
or index of item. 从上传队列移除项,value
可以是或者项的序号
clearQueuefunction() {
: Removes all elements from the queue. 移除上传队列所有的元素
uploadItemfunction(value) {
: Uploads an item,monospace;font-size:13.6000003814697px;">{FileItem}or index of item. 上传项,value
可以是{FileItem}
或者项的序号
cancelItemfunction(value) {
: Cancels uploading of item,monospace;font-size:13.6000003814697px;">{FileItem}or index of item. 取消上传的项
uploadAllfunction() {
: Upload all pending items on the queue. 将上传队列中所有的项进行上传
cancelAllfunction() {
: Cancels all current uploads. 取消所有当前上传
destroyfunction() {
: Destroys a uploader.
isFilefunction(value) {return {Boolean};}
: Returns true if value is{File}
.
isFileLikeObject{FileLikeObject}
.
getIndexOfItemfunction({FileItem}) {return {Number};}
: Returns the index of the{FileItem}
queue element. 返回项在上传队列中的序号
getReadyItemsfunction() {return {Array.<FileItems>};}
: Return items are ready to upload. 返回准备上传的项
getNotUploadedItemsfunction() {return {Array.<FileItems>};}
: Return an array of all pending items on the queue 返回上传队列中未上传的项
回调函数
addToQueuefunction(files[,options[,filters]]) {
: Add items to the queue,wherefiles
is a{FileList|File|HTMLInputElement}
,options
is an{Object}
andfilters
is a{String}
. 添加项到上传队列中,files
是{FileList|File|HTMLInputElement},
options
是{Object}
以及filters
是{String}
removeFromQueuefunction(value) {
: Remove an item from the queue,monospace;font-size:13.6000003814697px;">valueis{FileItem}
or index of item. 从上传队列移除项,value
可以是或者项的序号
clearQueuefunction() {
: Removes all elements from the queue. 移除上传队列所有的元素
uploadItemfunction(value) {
: Uploads an item,monospace;font-size:13.6000003814697px;">{FileItem}or index of item. 上传项,value
可以是{FileItem}
或者项的序号
cancelItemfunction(value) {
: Cancels uploading of item,monospace;font-size:13.6000003814697px;">{FileItem}or index of item. 取消上传的项
uploadAllfunction() {
: Upload all pending items on the queue. 将上传队列中所有的项进行上传
cancelAllfunction() {
: Cancels all current uploads. 取消所有当前上传
destroyfunction() {
: Destroys a uploader.
isFilefunction(value) {return {Boolean};}
: Returns true if value is{File}
.
isFileLikeObject{FileLikeObject}
.
getIndexOfItemfunction({FileItem}) {return {Number};}
: Returns the index of the{FileItem}
queue element. 返回项在上传队列中的序号
getReadyItemsfunction() {return {Array.<FileItems>};}
: Return items are ready to upload. 返回准备上传的项
getNotUploadedItemsfunction() {return {Array.<FileItems>};}
: Return an array of all pending items on the queue 返回上传队列中未上传的项
成功上传文件的回调函数顺序是:onAfterAddingFile — onAfterAddingAll—onBeforeUploadItem—onProgressItem—onProgressAll—onSuccessItem—onCompleteItem—onCompleteAll
FileItem@H_301_177@
属性
url{String}
: Path on the server in which this file will be uploaded 上传文件的服务器路径
alias{String}
: Name of the field which will contain the file,default isfile 包含文件的名称,默认是file
headers{Object}
: Headers to be sent along with this file. HTML5 browsers only. 上传的头文件信息, 浏览器需支持HTML5
formData{Array}
: Data to be sent along with this file 与文件一起发送的表单数据
method{String}
: It's a request method. By defaultPOST
. HTML5 browsers only. 请求方式,默认是POST,浏览器需支持HTML5
withCredentials{Boolean}
: enable CORS. HTML5 browsers only. 使用CORS,默认是false,浏览器需支持HTML5
removeAfterUpload{Boolean}
: Remove this file from the queue after uploading 上传之后从上传队列移除该文件
index{Number}
- A sequence number upload. Read only. 上传文件在上传队列中的序号,只读
progress{Number}
: File upload progress percentage. Read only. 文件上传的进度,只读
isReady{Boolean}
- File is ready to upload. Read only. 文件是否准备好上传,只读
isUploading{Boolean}
:true
if the file is being uploaded. Read only. 文件是否正在上传中,只读
isUploadedtrue
if the file was uploaded. Read only. 文件是否已经上传,只读
isSuccesstrue
if the file was uploaded successfully. Read only. 文件是否已经上传成功,只读
isCanceltrue
if uploading was canceled. Read only. 文件是否取消上传,只读
isError{Boolean}
-true
if occurred error while file uploading. Read only. 文件是否上传错误,只读
uploader{Object}
: Reference to the parentUploader
object for this file. Read only. 上传该文件的Uploader
,只读
url{String}
: Path on the server in which this file will be uploaded 上传文件的服务器路径
alias{String}
: Name of the field which will contain the file,default isfile 包含文件的名称,默认是file
headers{Object}
: Headers to be sent along with this file. HTML5 browsers only. 上传的头文件信息, 浏览器需支持HTML5
formData{Array}
: Data to be sent along with this file 与文件一起发送的表单数据
method{String}
: It's a request method. By defaultPOST
. HTML5 browsers only. 请求方式,默认是POST,浏览器需支持HTML5
withCredentials{Boolean}
: enable CORS. HTML5 browsers only. 使用CORS,默认是false,浏览器需支持HTML5
removeAfterUpload{Boolean}
: Remove this file from the queue after uploading 上传之后从上传队列移除该文件
index{Number}
- A sequence number upload. Read only. 上传文件在上传队列中的序号,只读
progress{Number}
: File upload progress percentage. Read only. 文件上传的进度,只读
isReady{Boolean}
- File is ready to upload. Read only. 文件是否准备好上传,只读
isUploading{Boolean}
:true
if the file is being uploaded. Read only. 文件是否正在上传中,只读
isUploadedtrue
if the file was uploaded. Read only. 文件是否已经上传,只读
isSuccesstrue
if the file was uploaded successfully. Read only. 文件是否已经上传成功,只读
isCanceltrue
if uploading was canceled. Read only. 文件是否取消上传,只读
isError{Boolean}
-true
if occurred error while file uploading. Read only. 文件是否上传错误,只读
uploader{Object}
: Reference to the parentUploader
object for this file. Read only. 上传该文件的Uploader
,只读
removefunction() {
: Remove this file from the queue 从上传队列移除该文件
onBeforeUploadfunction() {
: Fires before uploading an item. 上传该文件之前
onProgressfunction(progress) {
: On file upload progress. 上传该文件的过程
onSuccessfunction(response,headers) {
: On file successfully uploaded 成功上传该文件后
onError上传该文件出错后
onCancel上传该文件后
onComplete上传该文件后
Filters(过滤器)
注册过滤器:@H_301_177@
varuploader=newFileUploader({
filters:[{
name:'yourName1',//Auser-definedfilterfn:function(item){returntrue;
}
}]
});//另一种uploader.filters.push({
name:'yourName2',fn:function(item){returntrue;
}
});
预定义的过滤器:@H_301_177@
folder
queueLimit
folder
queueLimit
github地址:https://github.com/nervgh/angular-file-upload/wiki/Module-API