【移動應(yīng)用開發(fā)技術(shù)】angularJS上傳文件

【移動應(yīng)用開發(fā)技術(shù)】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">導(dǎo)入</a>

</a>

</div>//導(dǎo)入

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:"導(dǎo)入成功",

text:"",

type:"success",

timer:1300,

showConfirmButton:false

});

$cessingInfo();

}else{

swal({

title:"導(dǎo)入失敗",

text:"對不起，數(shù)據(jù)有誤，導(dǎo)入失敗!",

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}

的設(shè)置或者自定義設(shè)置。屬性

filters

可能是用,隔開的過濾器名稱，比如：

'filterName1,

filterName2'，這些過濾器必須如下預(yù)定義：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}:上傳文件的服務(wù)器路徑alias

{String}:

包含文件的名稱，默認(rèn)是filequeue

{Array}:上傳隊列progress

{Number}:上傳隊列的進(jìn)度，只讀headers

{Object}:上傳的頭文件信息，瀏覽器需支持HTML5formData

{Array}:

與文件一起發(fā)送的表單數(shù)據(jù)filters

{Array}:在文件加入上傳隊列之前應(yīng)用過濾器.，如果過濾器返回true則文件加入隊列中autoUpload

{Boolean}:文件加入隊列之后自動上傳，默認(rèn)是falsemethod

{String}:請求方式，默認(rèn)是POST，瀏覽器需支持HTML5removeAfterUpload

{Boolean}:文件上傳成功之后從隊列移除，默認(rèn)是falseisHTML5

{Boolean}:

如果瀏覽器支持HTML5上傳則返回true，只讀isUploading

{Boolean}:

文件正在上傳中返回true，只讀queueLimit

{Number}

:最大上傳文件數(shù)量（預(yù)定義）withCredentials

{Boolean}

:使用CORS，默認(rèn)是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.

將上傳隊列中所有的項進(jìn)行上傳cancelAll

function(){:Cancelsallcurrentuploads.

取消所有當(dāng)前上傳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.

返回準(zhǔn)備上傳的項getNotUploadedItems

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

Returnanarrayofallpendingitemsonthequeue

返回上傳隊列中未上傳的項回調(diào)函數(shù)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(){:上傳隊列的所有文件上傳完成后成功上傳文件的回調(diào)函數(shù)順序是：onAfterAddingFile

—onAfterAddingAll

—

onBeforeUploadItem

—

onProgressItem

—

onProgressAll

—

onSuccessItem

—

onCompleteItem

—

onCompleteAllFileItem屬性url

{String}:Pathontheserverinwhichthisfilewillbe

uploaded

上傳文件的服務(wù)器路徑alias

{String}:Nameofthefieldwhichwillcontainthefile,

defaultis

file

包含文件的名稱，默認(rèn)是fileheaders

{Object}:Headerstobesentalongwiththisfile.HTML5

browsersonly.

上傳的頭文件信息，瀏覽器需支持HTML5formData

{Array}:Datatobesentalongwiththisfile

與文件一起發(fā)送的表單數(shù)據(jù)method

{String}:It'sarequestmethod.Bydefault

POST.

HTML5browsersonly.

請求方式，默認(rèn)是POST，瀏覽器需支持HTML5withCredentials

{Boolean}

:enableCORS.HTML5browsersonly.

使用CORS，默認(rèn)是false，

瀏覽器需支持HTML5removeAfterUpload

{Boolean}:Removethisfilefromthequeue

afteruploading

上傳之后從上傳隊列移除該文件index

{Number}

-Asequencenumberupload.Readonly.

上傳文件在上傳隊列中的序號，只讀progress

{Number}:Fileuploadprogresspercentage.Readonly.

文件上傳的進(jìn)度，只讀isReady

{Boolean}

-Fileisreadytoupload.Readonly.

文件是否準(zhǔn)備好上傳，只讀isUploading

{Boolean}:

true

if

thefileisbeinguploaded.Readonly.

文件是否正在上傳中，只讀isUploaded

{Boolean}:

true

if

thefilewasuploaded.Readonly.

文件是否已經(jīng)上傳，只讀isSuccess

{Boolean}:

true

if

thefilewasuploadedsuccessfully.Readonly.

文件是否已經(jīng)上傳成功，只讀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