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

跟我学百度文件上传WebUploader插件及应用示例——在J2EE Web应用系统中应用WebUploader插件的应用示例 在J2EE Web应用系统中应用WebUploader插件 1、使用WebUploader插件所需要引入的资源文件 在Web页面中应用WebUploader插件实现文件上传时需要引入如下的三种资源文件（JavaScript、CSS和SWF）。 （1）在Web页面中引入相关的CSS样式定义文件 link href=${pageContext.request.contextPath}/css/webuploader.css rel=stylesheet type=text/css 如果在Web页面中不引入这个CSS样式定义文件，将会导致相关的文件上传按钮的样式不能正确地显示。 （2）在Web页面中引入JavaScript程序代码文件 script type=text/javascript src=${pageContext.request.contextPath}/javascript/lib/webuploader.js /script SWF在初始化的时候指定，在后面将展示 对于Flash版本的WebUploader插件在应用时，还需要指定WebUploader插件内带的Flash文件。可以通过如下的swf属性选项定义指定Flash文件所在的目录： swf: BASE_URL + /javascript/lib/Uploader.swf, 2、自行提供UI界面组件 （1）Web前端开发人员需要自行实现UI界面组件 由于WebUploader插件只包含文件上传的底层功能实现，并不包括UI显示的功能实现。所以Web页面在交互方面可以由应用开发人员自由发挥和实现。 （2）UI界面组件的实现示例 div id=webUpLoaderWarpDivTagID div class=queueList div id=dndArea class=placeholder div id=filePicker/div p或将照片直接拖到此（但目前只能够拖一个文件）/p /div /div div class=upLoadFileInfoList /div div class=statusInfoBar div class=progress span class=text0%/span span class=percentage/span /div div class=info/div div class=btns div id=addFileButtonTagID/div div class=uploadBtn开始上传/div /div /div /div （3）示例UI界面组件显示的结果 3、在Web页面中的JavaScript控制程序代码中初始化WebUploader插件 在Web页面中的JavaScript控制程序代码中初始化WebUploader插件，并根据应用的属性设置和定义相关的属性选项的值。如下为示例代码： webUpLoaderInstance = WebUploader.create({ /** swf文件路径 */ swf: BASE_URL + /javascript/lib/Uploader.swf, /** 文件接收服务端。 */ server: BASE_URL+/fileupload.servlet?requestType=2, /** 选择文件的按钮。可选，内部根据当前运行是创建，可能是input元素，也可能是flash. */ pick: { id: #filePicker, label: 点击选择上传的图片 }, accept: { title: Images, extensions: acceptExtensions, /*