Tapestry4中上传文件的组件对文件的处理做了很好的封装,用户界面最常用的还是普通Form中的
<input type="file">,最近看了SWFUpload(http://labb.dev.mammon.se/swfupload/)组件,感觉不错,
界面可以设计的很友好,定制性很强,而且提供了javascript回调接口,可以很好的跟踪文件上传的各种事件。
SWFUpload给出的例子中,只是给出php的后台实现,下面给出在Tapestry4中的实现。
第一步:下载并修改SWFUpload
从http://labb.dev.mammon.se/swfupload/上下载SWFUpload_beta.zip解压,我们所需要的
文件都放在目录jscripts\SWFUpload下,拷贝images目录下的文件到你项目中存放图片的文件,我暂放于项目
中的额images/SWFUpload中,同样mmSWFUpload.js拷贝到项目中存放javascript脚本的文件夹中,我暂放
于js/SWFUpload,同时我也将upload.swf放在js/SWFUpload,这些都是可以配置的,可以根据项目自己存放。
第二步:定制SWFUpload
修改mmSWFUpload中的跟路径相关的字符串,例如21行中的
var so = new SWFObject("jscripts/SWFUpload/upload.swf",…,这个是关键,
根据我存放的位置我要修改为var so = new SWFObject("js/SWFUpload/upload.swf",…。
其他还有图片的默认路径,这些可以在使用时定制,不修改也可以。
第三步:设计SWFUpload界面
代码
- <div id="uploadFile"><!---->div>
-
- <div id="fileContainer"><!---->div>
-
- <div id="progressInfoElm"><!---->div>
-
- <script type="text/javascript">
-
- mmSWFUpload.init({
-
- upload_backend : "/UploadFile.xhtml",
-
- button_image : "/images/SWFUpload/btn_upload.png",
-
- button_mouseover_image : "/images/SWFUpload/btn_upload_over.png",
-
- target : "uploadFile",
-
- allowed_filetypes : "*.gif;*.jpg;*.png",
-
- upload_start_callback : 'uploadStart',
-
- upload_progress_callback : 'uploadProgress',
-
- upload_complete_callback : 'uploadComplete',
-
- upload_error_callback : 'uploadError',
-
- upload_cancel_callback : 'uploadCancel'
-
- });
-
- uploadStart = function(fileObj) {
-
- var container = document.getElementById("fileContainer");
-
- container.innerHTML += "<span id='" + fileObj.name + "' >";
-
- container.innerHTML += fileObj.name + ", ";
-
- container.innerHTML += fileObj.size + ", ";
-
- container.innerHTML += fileObj.type + "<!---->span><br />";
-
- }
-
-
-
- uploadProgress = function(fileObj, bytesLoaded) {
-
- var pie = document.getElementById("progressInfoElm");
-
- var proc = Math.ceil((bytesLoaded / fileObj.size) * 100);
-
- pie.innerHTML = proc + " %";
-
- }
-
-
-
- uploadComplete = function(fileObj) {
-
- document.getElementById(fileObj.name).className = "uploadDone";
-
- document.getElementById(fileObj.name).innerHTML = objFile.name + " done!";
-
- }
- <!---->script>
上边中的UploadFile.xhml文件就是下一步将要处理文件上传的Tapestry类,将在下一步介绍。其中的target : "uploadFile",是指在哪里显示SWFUpload组件,需要指定个层或者其他html容器。其他的回调函数是示例中的代码,定制一下的话,可以实现很好的效果。<o:p></o:p>
<o:p></o:p>
第四步:编写Tapestry处理类<o:p></o:p>
上一步中的UploadFile.xhtml,是配置Tapestry的friendly url的结果,实际上就是指调用UploadFile页面类。具体代码如下:<o:p></o:p>
<o:p> </o:p>
java 代码
- import java.io.File;
-
- import java.io.FileNotFoundException;
-
- import java.io.FileOutputStream;
-
- import java.io.IOException;
-
- import java.io.InputStream;
-
-
-
- import org.apache.commons.io.IOUtils;
-
- import org.apache.tapestry.annotations.InjectObject;
-
- import org.apache.tapestry.event.PageBeginRenderListener;
-
- import org.apache.tapestry.event.PageEvent;
-
- import org.apache.tapestry.html.BasePage;
-
- import org.apache.tapestry.multipart.MultipartDecoder;
-
- import org.apache.tapestry.request.IUploadFile;
-
-
-
- public abstract class UploadFile extends BasePage implements
-
- PageBeginRenderListener {
-
- @InjectObject("infrastructure:multipartDecoder")
-
- public abstract MultipartDecoder getDecoder();
-
-
-
- public void pageBeginRender(PageEvent event) {
-
- IUploadFile file = getDecoder().getFileUpload("Filedata");
-
- saveFile(file);
-
- }
-
-
-
- private void saveFile(IUploadFile uploadFile) {
-
- File file = new File("whichFileYourWantToSave");
-
- InputStream input = uploadFile.getStream();
-
- try {
-
- FileOutputStream output = new FileOutputStream(file);
-
- IOUtils.copy(input, output);
-
- } catch (FileNotFoundException e) {
-
- e.printStackTrace();
-
- } catch (IOException e) {
-
- e.printStackTrace();
-
- } finally {
-
- IOUtils.closeQuietly(input);
-
- }
-
- }
-
- }
<o:p></o:p>
当然使用Page类只是个取巧的办法,最好还是写个Service类来处理,Page类的就需要有个模版文件,
可以创建个空的UploadFile.html类文件跳过检查。whichFileYourWantToSave替换为你想要保存的文件位置。<o:p></o:p>
这样SWFUpload组件就可以用在Tapestry中了,当然这里只是做个抛砖引玉,写个Service或者组件都是
可以的,再让美工做个好点的图标,在回调函数中写一些效果,最终可以作出很好的文件上传页面。
分享到:
- 2006-11-18 15:06
- 浏览 7810
- 评论(0)
- 论坛回复 / 浏览 (0 / 6474)
- 查看更多
相关推荐
Tapestry 4 官方文档中版本 Tapestry 4 官方文档中版本 Tapestry 4 官方文档中版本
Tapestry4开发指南.rar Tapestry4开发指南.rar Tapestry4开发指南.rar
Tapestry4的雏形是Tapestry3.1,Tapestry的作者Howard,不光开发了Tapestry,还同时开发了一个轻量级框架Hivemind。所以Tapestry3.1的开发一开始就处于Hivemind框架之下。后来由于种种原因,Howard没有将Tapestry3.1...
Tapestry 4 官方文档中文版本,包括Tapestry4 Quick Start(2)和Tapestry4 Users Guide(2)两个文档 还有tapestry中文字典等
Tapestry 4 官方文档中文版本,现在中文资料比较少,和大家共享一下
Tapestry4 Tapestry4 深入浅出Tapestry4深入浅出Tapestry4深入浅出Tapestry4
tapestry4开发指南,一本很实用的书籍,适合初学者
Tapestry5最新中文教程.doc 作者 Renat Zubairov & Igor Drobiazko译者 沙晓兰 发布于 2008年7月2日 下午9时30分 社区 Java 主题 Web框架 ----------------------------------------- Tapestry5.1实例教程.pdf ...
Tapestry4开发指南,环境搭建和基本应用
该包包含: Tapestry5最新中文教程.doc tapestry.pdf tapestry开发流程.docx Tapestry开发指南0.8.pdf tapestry用户手册.pdf
最新Tapestry 5 電子書
tapestry5组件说明使用及登陆修改等简单实例
Tapestry 5.4.1 相关jar文件
基于tapestry5.0的文件下载实例,已经完美实现,请参考。
使读者在学习如何使用Tapestry框架技术的同时,还能够获得在J2EE Web应用程序中应用Tapestry框架的先进经验。本书详细介绍了Hivemind框架的原理与应用,使读者不但可以通过Hivemind来重构Tapes 资源太大,传百度网盘...
本文利用Tapestry 5开发一个简单的具有创建/读/更新/删除功能的应用,在创建这个应用的过程中,本文体会到Tapestry带来的开发效率的提升。从多方面来讲解 Tapestry应用,比如应用的页面导航(page navigation)、...
tapestry5.1.0.5中文实例教程,对于目前国内tapestry学习资源紧缺的情况,可谓填补了中文学习最大的空白,对于想学习tapestry5框架的人来说可谓字字如金,内容详尽,由浅入深,pdf格式