<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
属性
方法
addToQueue
function(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}
removeFromQueue
function(value) {
: Remove an item from the queue,monospace;font-size:13.6000003814697px;">valueis{FileItem}
or index of item. 从上传队列移除项,value
可以是或者项的序号
clearQueue
function() {
: Removes all elements from the queue. 移除上传队列所有的元素uploadItem
function(value) {
: Uploads an item,monospace;font-size:13.6000003814697px;">{FileItem}or index of item. 上传项,value
可以是{FileItem}
或者项的序号cancelItem
function(value) {
: Cancels uploading of item,monospace;font-size:13.6000003814697px;">{FileItem}or index of item. 取消上传的项uploadAll
function() {
: Upload all pending items on the queue. 将上传队列中所有的项进行上传cancelAll
function() {
: Cancels all current uploads. 取消所有当前上传destroy
function() {
: Destroys a uploader.isFile
function(value) {return {Boolean};}
: Returns true if value is{File}
.isFileLikeObject
{FileLikeObject}
.getIndexOfItem
function({FileItem}) {return {Number};}
: Returns the index of the{FileItem}
queue element. 返回项在上传队列中的序号getReadyItems
function() {return {Array.<FileItems>};}
: Return items are ready to upload. 返回准备上传的项getNotUploadedItems
function() {return {Array.<FileItems>};}
: Return an array of all pending items on the queue 返回上传队列中未上传的项
回调函数
onWhenAddingFileFailed
function(item,options) {
: 添加文件到上传队列失败后onProgressItem
文件上传中
onSuccessItem
文件上传成功后
onErrorItem
文件上传失败后
onCancelItem
文件上传取消后
onCompleteItem
文件上传完成后
成功上传文件的回调函数顺序是:onAfterAddingFile — onAfterAddingAll—onBeforeUploadItem—onProgressItem—onProgressAll—onSuccessItem—onCompleteItem—onCompleteAll
FileItem
属性
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. 上传的头文件信息, 浏览器需支持HTML5formData
{Array}
: Data to be sent along with this file 与文件一起发送的表单数据method
{String}
: It's a request method. By defaultPOST
. HTML5 browsers only. 请求方式,默认是POST,浏览器需支持HTML5withCredentials
{Boolean}
: enable CORS. HTML5 browsers only. 使用CORS,默认是false,浏览器需支持HTML5removeAfterUpload
{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. 文件是否正在上传中,只读isUploaded
true
if the file was uploaded. Read only. 文件是否已经上传,只读isSuccess
true
if the file was uploaded successfully. Read only. 文件是否已经上传成功,只读isCancel
true
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(过滤器)
注册过滤器:
varuploader=newFileUploader({ filters:[{ name:'yourName1',//Auser-definedfilterfn:function(item){returntrue; } }] });//另一种uploader.filters.push({ name:'yourName2',fn:function(item){returntrue; } });
预定义的过滤器:
folder
queueLimit
github地址:https://github.com/nervgh/angular-file-upload/wiki/Module-API