【移动应用开发技术】angularJS上传文件

【移动应用开发技术】angularJS上传文件

<divclass="col-lg-1col-sm-1pull-right">

<aid="fileb"href="javascript:;"name="file"ng-show="jIn">

<inputtype="file"nv-file-select=""uploader="uploader1"multiple/><aclass="btnbtn-info

btn-sm"ng-show="jIn">导入</a>

</a>

</div>//导入

varuploader1=$scope.uploader1=newFileUploader({

url:'http://localhost:8080/importWorkBook?loanChannel=005',

autoUpload:true

});

//FILTERS

uploader1.filters.push({

name:'customFilter',

fn:function(item/*{File|FileLikeObject}*/,options){

returnthis.queue.length<10;

}

});

//CALLBACKS

uploader1.onWhenAddingFileFailed=function(item/*{File|FileLikeObject}*/,filter,options){//

('onWhenAddingFileFailed',item,filter,options);

};

uploader1.onAfterAddingFile=function(fileItem){//

('onAfterAddingFile',fileItem);

};

uploader1.onAfterAddingAll=function(addedFileItems){//

('onAfterAddingAll',addedFileItems);

};

uploader1.onBeforeUploadItem=function(item){//

('onBeforeUploadItem',item);

};

uploader1.onProgressItem=function(fileItem,progress){//

('onProgressItem',fileItem,progress);

};

uploader1.onProgressAll=function(progress){//

('onProgressAll',progress);

};

uploader1.onSuccessItem=function(fileItem,response,status,headers){

if(response.returnMsg=="ok"){

swal({

title:"导入成功",

text:"",

type:"success",

timer:1300,

showConfirmButton:false

});

$cessingInfo();

}else{

swal({

title:"导入失败",

text:"对不起，数据有误，导入失败!",

type:"error",

timer:1300,

showConfirmButton:false

});

$cessingInfo();

}//

('onSuccessItem',fileItem,response,status,headers);

};

uploader1.onErrorItem=function(fileItem,response,status,headers){//

('onErrorItem',fileItem,response,status,headers);

};

uploader1.onCancelItem=function(fileItem,response,status,headers){//

('onCancelItem',fileItem,response,status,headers);

};

uploader1.onCompleteItem=function(fileItem,response,status,headers){//

('onCompleteItem',fileItem,response,status,headers);

};

uploader1.onCompleteAll=function(){//

('onCompleteAll');

};//

('uploader',uploader);

控制多文件上传及文件类型

accept="p_w_picpath/*"

multiplenv-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()

{/*

your

code

here

*/}});

uploader.filters.push({name:'filterName2',

fn:function()

{/*

your

code

here

*/}});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>FileUploaderFileUploader属性url

{String}:上传文件的服务器路径alias

{String}:

包含文件的名称，默认是filequeue

{Array}:上传队列progress

{Number}:上传队列的进度，只读headers

{Object}:上传的头文件信息，浏览器需支持HTML5formData

{Array}:

与文件一起发送的表单数据filters

{Array}:在文件加入上传队列之前应用过滤器.，如果过滤器返回true则文件加入队列中autoUpload

{Boolean}:文件加入队列之后自动上传，默认是falsemethod

{String}:请求方式，默认是POST，浏览器需支持HTML5removeAfterUpload

{Boolean}:文件上传成功之后从队列移除，默认是falseisHTML5

{Boolean}:

如果浏览器支持HTML5上传则返回true，只读isUploading

{Boolean}:

文件正在上传中返回true，只读queueLimit

{Number}

:最大上传文件数量（预定义）withCredentials

{Boolean}

:使用CORS，默认是false，

浏览器需支持HTML5方法addToQueue

function(files[,options[,filters]]){:Additems

tothequeue,where

files

isa

{FileList|File|HTMLInputElement},

options

is

an

{Object}

andfilters

isa

{String}.

添加项到上传队列中，files

是

{FileList|File|HTMLInputElement}，

options

是

{Object}

以及

filters

是

{String}removeFromQueue

function(value){:Removeanitemfromthequeue,

wherevalue

is

{FileItem}

or

indexofitem.

从上传队列移除项，value

可以是

{FileItem}

或者项的序号clearQueue

function(){:Removesallelementsfromthequeue.

移除上传队列所有的元素uploadItem

function(value){:Uploadsanitem,where

value

is

{FileItem}

or

indexofitem.

上传项，

value

可以是

{FileItem}

或者项的序号cancelItem

function(value){:Cancelsuploadingofitem,where

value

is{FileItem}

or

indexofitem.

取消上传的项uploadAll

function(){:Uploadallpendingitemsonthequeue.

将上传队列中所有的项进行上传cancelAll

function(){:Cancelsallcurrentuploads.

取消所有当前上传destroy

function(){:Destroysauploader.

isFile

function(value){return{Boolean};}:Returnstrueif

valueis

{File}.

isFileLikeObject

function(value){return{Boolean};}:Returns

trueifvalueis{FileLikeObject}.getIndexOfItem

function({FileItem}){return{Number};}:Returns

theindexofthe{FileItem}

queueelement.

返回项在上传队列中的序号getReadyItems

function(){return{Array.<FileItems>};}:Return

itemsarereadytoupload.

返回准备上传的项getNotUploadedItems

function(){return{Array.<FileItems>};}:

Returnanarrayofallpendingitemsonthequeue

返回上传队列中未上传的项回调函数onAfterAddingFile

function(item){:添加文件到上传队列后onWhenAddingFileFailed

function(item,filter,options){:添加文件到上传队列失败后onAfterAddingAll

function(addedItems){:添加所选的所有文件到上传队列后onBeforeUploadItem

function(item){:文件上传之前onProgressItem

function(item,progress){:文件上传中onSuccessItem

function(item,response,status,headers){:文件上传成功后onErrorItem

function(item,response,status,headers){:文件上传失败后onCancelItem

function(item,response,status,headers){

-文件上传取消后onCompleteItem

function(item,response,status,headers){:

文件上传完成后onProgressAll

function(progress){:上传队列的所有文件上传中onCompleteAll

function(){:上传队列的所有文件上传完成后成功上传文件的回调函数顺序是：onAfterAddingFile

—onAfterAddingAll

—

onBeforeUploadItem

—

onProgressItem

—

onProgressAll

—

onSuccessItem

—

onCompleteItem

—

onCompleteAllFileItem属性url

{String}:Pathontheserverinwhichthisfilewillbe

uploaded

上传文件的服务器路径alias

{String}:Nameofthefieldwhichwillcontainthefile,

defaultis

file

包含文件的名称，默认是fileheaders

{Object}:Headerstobesentalongwiththisfile.HTML5

browsersonly.

上传的头文件信息，浏览器需支持HTML5formData

{Array}:Datatobesentalongwiththisfile

与文件一起发送的表单数据method

{String}:It'sarequestmethod.Bydefault

POST.

HTML5browsersonly.

请求方式，默认是POST，浏览器需支持HTML5withCredentials

{Boolean}

:enableCORS.HTML5browsersonly.

使用CORS，默认是false，

浏览器需支持HTML5removeAfterUpload

{Boolean}:Removethisfilefromthequeue

afteruploading

上传之后从上传队列移除该文件index

{Number}

-Asequencenumberupload.Readonly.

上传文件在上传队列中的序号，只读progress

{Number}:Fileuploadprogresspercentage.Readonly.

文件上传的进度，只读isReady

{Boolean}

-Fileisreadytoupload.Readonly.

文件是否准备好上传，只读isUploading

{Boolean}:

true

if

thefileisbeinguploaded.Readonly.

文件是否正在上传中，只读isUploaded

{Boolean}:

true

if

thefilewasuploaded.Readonly.

文件是否已经上传，只读isSuccess

{Boolean}:

true

if

thefilewasuploadedsuccessfully.Readonly.

文件是否已经上传成功，只读isCancel

{Boolean}

:

true

if

uploadingwascanceled.Readonly.

文件是否取消上传，只读isError

{Boolean}

-

true

if

occurrederrorwhilefileuploading.Readonly.

文件是否上传错误，只读uploader

{Object}:Referencetotheparent

Uploader

object

forthisfile.Readonly.

上传该文件的Uploader

，只读方法remove

function(){:Removethisfilefromthequeue

从上传队列移除该文件upload

function(){:Uploadthisfile

上传该文件cancel

function(){:Cancelsuploadingofthisfile