文件跟我学百度文件上传WebUploader插件及应用示例——在J2EE Web应用系统中应用WebUploader插件的应用示例

我在百度时间:2021-02-26 阅读:()

杨教授工作室精心创作的优秀程序员职业提升必读系列资料

1. 1 跟我学百度文件上传WebUploader插件及应用示例——在J2EE Web应用系统中应用WebUploader插件的应用示例

1. 1. 1在J2EE Web应用系统中应用WebUploader插件

1、使用We bU plo a de r插件所需要引入的资源文件

在Web页面中应用WebUp lo ader插件实现文件上传时需要引入如下的三种资源文件

JavaScript、 CSS和SWF 。

 1在Web页面中引入相关的C S S样式定义文件

如果在Web页面中不引入这个C S S样式定义文件将会导致相关的文件上传按钮的样式不能正确地显示。

2在Web页面中引入JavaScript程序代码文件

</script>

杨教授工作室精心创作的优秀程序员职业提升必读系列资料

3 S WF在初始化的时候指定在后面将展示

对于Fla sh版本的WebUp loader插件在应用时还需要指定Web Up loader插件内带的Flash文件。可以通过如下的swf属性选项定义指定Flash文件所在的目录swf:BASE_URL+'/javascript/lib/Uploader.swf',

2、自行提供UI界面组件

1Web前端开发人员需要自行实现UI界面组件

由于WebUploader插件只包含文件上传的底层功能实现并不包括UI显示的功能实现。所以Web页面在交互方面可以由应用开发人员自由发挥和实现。

2UI界面组件的实现示例

<p>或将照片直接拖到此但目前只能够拖一个文件 </p>

</d iv>

</d iv>

</d iv>

杨教授工作室精心创作的优秀程序员职业提升必读系列资料

</d iv>

3示例UI界面组件显示的结果

3、在We b页面中的Java S cript控制程序代码中初始化We bU plo a de r插件

在Web页面中的JavaScrip t控制程序代码中初始化WebUp loader插件并根据应用的属性设置和定义相关的属性选项的值。如下为示例代码webUp Loade rIns tance=WebUp loader.c reate({

/**swf文件路径

*/swf:BASE_URL+'/javascript/lib/Uploader.swf',

/**

文件接收服务端。

*/server:BASE_URL+'/fileup load.servlet?requestTyp e=2',

/**

选择文件的按钮。可选内部根据当前运行是创建可能是input元素也可能是flash.

*/pick: {id: '#fileP icker',label: '点击选择上传的图片'

},accept: {

杨教授工作室精心创作的优秀程序员职业提升必读系列资料

title: 'Images',extensions:acceptExtensions,

/**

修改上传文件类型图片的话是ima ge

*/mime Typ e s: 'ima ge/*'

/**

上传图片时附带的参数格式为 参数名称参数值如userID:123或者userName:"张三"  目前没有参数

*/fo r mD ata: {

/**

指定可拖拽的容器

*/dnd: '#d nd Are a',

/**

监听粘贴事件的容器

*/paste: '#webUp Loade rWarp D ivTa gI D',

/**

分块传输编码(Chunked transfer encoding)是超文本传输协议(HTTP)中的一种数据传输机制下面的c hunk e d指定是否分片上传

*/chunked: fa lse,

/**

如果需要分片删除则指定分片的大小

*/chunk S ize:512* 1024,

杨教授工作室精心创作的优秀程序员职业提升必读系列资料

/**

不压缩image,默认如果是jpe g文件上传前会压缩一把再上传

*/res ize: fa lse,

/**

禁掉全局的拖拽功能。这样不会出现图片拖进页面的时候把图片打开。

*/disab leGlobalDnd:true,

/**

该参数为可选的参数默认值为false。设置为true后不需要手动调用上传有文件选择即开始上传。

*/auto:fa l s e,

/**

单次上传的文件总数量,超出则不允许加入队列

*/fileN umL im it:3,

/**

单次上传文件时的所有文件的总容量大小本示例为200M

*/file S ize Limit:200* 1024* 1024,

/**

单次上传文件时的单个文件的大小本示例为50M

*/file S ingle S ize Limit:50* 1024* 1024

});

4、为We bU plo a de r插件设置和定义各种相关事件响应方法

1显示用户选择

由于webup loader不处理UI逻辑所以需要去监听fileQ ueued事件来实现。当有文件被添加进队列的时候将触发'fileQueued'事件。如下为程序代码示例

杨教授工作室精心创作的优秀程序员职业提升必读系列资料

webUp Loade rIns tance.o n( 'fileQ ue ued', functio n(file) {

/**

累加相关的数据

*/fileC o unt++;fileS ize+=file.s ize;

/**

识别目前的上传文件总数是否为1个文件

*/if(fileC o unt===1 ) {

$p laceHo lder.addC lass( 'e lement-invis ib le' );

$statusBar.s ho w();

}addF ile(file);setStat e( 'ready' );updateTo ta lP ro gre s s();

/**

将待上传的文件名称信息在列表信息显示区域中显示输出

$up LoadF ileInfo List.app end('<span id="'+file.id+'"c lass="item">'+

'<span class="info">'+file.name+'</span>'+

'<sp an c las s="s tate">&nb sp;等待上传中. . .&nb sp;</sp an>'+

'<span class="del"></span>'+

'</span>');

});

2文件上传进度

在文件上传的过程中WebUp loade r插件会对外派送up loadP ro gres s事件其中包含正在上传的文件对象和该文件当前上传的进度从而可以在文件上传过程中希望创建进度条的实时显示时应用up loadPro gre ss事件。如下为程序代码示例webUp Lo ade rI ns tance.o n( 'up lo adPro gre s s', func tio n(fi le,p erce nta ge) {

杨教授工作室精心创作的优秀程序员职业提升必读系列资料

var$li=$('#'+file.id),$p erce nt=$li.find(' .pro gre s s sp an');

$perce nt.cs s( 'width',pe rce nta ge* 100+'%' );p erce nta ge s[file.id][ 1 ]=p erce nta ge;updateTo ta lP ro gre s s();

});

3单个文件上传成功

一旦有某个文件上传成功WebUploader插件会对外派送uploadSuccess事件在该事件中可以获得成功上传的文件名称等信息并在页面中显示输出和缓存在表单的隐藏输入框中以方便传递到Web服务器端相关程序从而在Web服务器端相关程序中获得已上传的文件名称、文件容量等属性信息。如下为程序代码示例webUp Loade rIns tance.o n('up loadS uccess', functio n(file, respo nse) {var fileNameList_HiddenInputTag=document.getElementById("hiddenUpF ileName ListInp utTagID2");

/**

识别在隐藏<input>标签中是否已经缓存有文件名称信息如果有则进行累加否则将直接赋值

*/if((fi leName Lis t_Hidde nInp utTa g.va lue=="")| |

(fileName List_HiddenInputTag.value.length==0)){fileNameList_HiddenInputTag.value=file.name;

}else{fileNameList_HiddenInputTag.value=fileName List_HiddenInputTag.value+","+file.name;

}

/**

在文件名称的信息列表中显示出对应文件上传成功的信息

$up LoadF ileInfo List.app end('<span id="'+file.id+'"c lass="item">'+

'<span class="info">'+file.name+'</span>'+

杨教授工作室精心创作的优秀程序员职业提升必读系列资料

'<span c lass="s tate">&nb sp;已经上传成功&nb sp;</span></span>');

});

4文件上传失败时的错误处理

当某个文件在上传过程中出现了错误而导致不能成功地上传WebUp loader插件会对外派送up lo adError事件从而可以在该事件响应方法中获得上传失败的文件信息及相关的错误信息如下为程序代码示例webUp Lo ade rI ns tance.o nErro r=func tio n(c ode) {if(code=='Q_TYPE_DENIED'){alert( "所上传的文件类型不是图片类型的文件。 " );return;

}if(code=='Q_EXC EED_NUM_LIMIT'){a lert( "单次上传的文件总数为"+webUp Lo ade rI ns tance.op tio ns.fileN umLimit+"个文件 目前超出范围 ");ret ur n;

}alert('上传的错误编码 '+code);

};

或者up lo ader.o n( 'up loadErro r', functio n(file) {

$( '#'+file.id).find('p.state').te xt('上传出错');

});

5所有的文件上传完毕

在实现成批文件上传时不管文件上传是否成功或者失败在所有的文件都上传完毕后WebUp loader插件会对外派送和触发up loadCo mp lete事件。如下为程序代码示例up lo ader.o n( 'up loadC o mp lete', func tio n(file) {

$( '#'+file.id).find(' .p ro gres s').fadeO ut();

});

5、文件上传过程中状态切换控制

杨教授工作室精心创作的优秀程序员职业提升必读系列资料