,最近看了SWFUpload(http://labb.dev.mammon.se/swfupload/)组件,感觉不错,界面可以设计的很友好,定制性很强,而且提供了javascript回调接口,可以很好的跟踪文件上传的各种事件。"/>
技术开发 频道

在Tapestry4中使用SWFUpload上传文件

【IT168技术文档】

    Tapestry4中上传文件的组件对文件的处理做了很好的封装,用户界面最常用的还是普通Form中的<input type="file">,最近看了SWFUpload(http://labb.dev.mammon.se/swfupload/)组件,感觉不错,界面可以设计的很友好,定制性很强,而且提供了javascript回调接口,可以很好的跟踪文件上传的各种事件。SWFUpload给出的例子中,只是给出php的后台实现,下面给出在Tapestry4中的实现。

    第一步:下载并修改SWFUploadhttp://labb.dev.mammon.se/swfupload/上下载SWFUpload_beta.zip解压,我们所需要的文件都放在目录jscripts\SWFUpload下,拷贝images目录下的文件到你项目中存放图片的文件,我暂放于项目中的额images/SWFUpload中,同样mmSWFUpload.js拷贝到项目中存放javascript脚本的文件夹中,我暂放于js/SWFUpload,同时我也将upload.swf放在js/SWFUpload,这些都是可以配置的,可以根据项目自己存放。

    第二步:定制SWFUploadmmSWFUpload中的跟路径相关的字符串,例如21行中的var so = new SWFObject("jscripts/SWFUpload/upload.swf",…,这个是关键,根据我存放的位置我要修改为var so = new SWFObject("js/SWFUpload/upload.swf",…。其他还有图片的默认路径,这些可以在使用时定制,不修改也可以。

    第三步:设计SWFUpload界面 代码 

<div id="uploadFile"> <!--</span-->div> <div id="fileContainer"> <!--</span-->div> <div id="progressInfoElm"> <!--</span-->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-->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!"; } <!--</span-->script>

    上边中的UploadFile.xhml文件就是下一步将要处理文件上传的Tapestry类,将在下一步介绍。其中的target : "uploadFile",是指在哪里显示SWFUpload组件,需要指定个层或者其他html容器。其他的回调函数是示例中的代码,定制一下的话,可以实现很好的效果。

    第四步:编写Tapestry处理类上一步中的UploadFile.xhtml,是配置Tapestry的friendly url的结果,实际上就是指调用UploadFile页面类。具体代码如下:

    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); } } }

    当然使用Page类只是个取巧的办法,最好还是写个Service类来处理,Page类的就需要有个模版文件,可以创建个空的UploadFile.html类文件跳过检查。whichFileYourWantToSave替换为你想要保存的文件位置。

     这样SWFUpload组件就可以用在Tapestry中了,当然这里只是做个抛砖引玉,写个Service或者组件都是可以的,再让美工做个好点的图标,在回调函数中写一些效果,最终可以作出很好的文件上传页面。

0
相关文章