论坛首页 → Java企业应用论坛 →

在Tapestry4中使用SWFUpload上传文件

浏览 6496 次
锁定老帖子 主题：在Tapestry4中使用SWFUpload上传文件
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
  • tapestry
  • 等级: 二星会员
  • 文章: 83
  • 积分: 184
   发表时间：2006-11-18   
    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界面
       
 代码
 
  1. <div id="uploadFile"><!---->div>  
  2.   
  3. <div id="fileContainer"><!---->div>  
  4.   
  5. <div id="progressInfoElm"><!---->div>  
  6.   
  7. <script type="text/javascript">  
  8.   
  9. mmSWFUpload.init({  
  10.   
  11.         upload_backend : "/UploadFile.xhtml",  
  12.   
  13.        button_image : "/images/SWFUpload/btn_upload.png",  
  14.   
  15.        button_mouseover_image : "/images/SWFUpload/btn_upload_over.png",  
  16.   
  17.        target : "uploadFile",  
  18.   
  19.        allowed_filetypes : "*.gif;*.jpg;*.png",  
  20.   
  21.        upload_start_callback : 'uploadStart',  
  22.   
  23.        upload_progress_callback : 'uploadProgress',  
  24.   
  25.        upload_complete_callback : 'uploadComplete',  
  26.   
  27.        upload_error_callback : 'uploadError',  
  28.   
  29.        upload_cancel_callback : 'uploadCancel'  
  30.   
  31.     });  
  32.   
  33. uploadStart = function(fileObj) {  
  34.   
  35.     var container = document.getElementById("fileContainer");  
  36.   
  37.     container.innerHTML += "<span id='" + fileObj.name + "' >";  
  38.   
  39.     container.innerHTML += fileObj.name + ", ";  
  40.   
  41.     container.innerHTML += fileObj.size + ", ";  
  42.   
  43.     container.innerHTML += fileObj.type + "<!---->span><br />";  
  44.   
  45. }  
  46.   
  47.    
  48.   
  49. uploadProgress = function(fileObj, bytesLoaded) {  
  50.   
  51.     var pie = document.getElementById("progressInfoElm");  
  52.   
  53.     var proc = Math.ceil((bytesLoaded / fileObj.size) * 100);  
  54.   
  55.     pie.innerHTML = proc + " %";  
  56.   
  57. }  
  58.   
  59.    
  60.   
  61. uploadComplete = function(fileObj) {  
  62.   
  63.     document.getElementById(fileObj.name).className = "uploadDone";  
  64.   
  65.     document.getElementById(fileObj.name).innerHTML = objFile.name + " done!";  
  66.   
  67. }  
  68. <!---->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 代码
 
  1. import java.io.File;  
  2.   
  3. import java.io.FileNotFoundException;  
  4.   
  5. import java.io.FileOutputStream;  
  6.   
  7. import java.io.IOException;  
  8.   
  9. import java.io.InputStream;  
  10.   
  11.    
  12.   
  13. import org.apache.commons.io.IOUtils;  
  14.   
  15. import org.apache.tapestry.annotations.InjectObject;  
  16.   
  17. import org.apache.tapestry.event.PageBeginRenderListener;  
  18.   
  19. import org.apache.tapestry.event.PageEvent;  
  20.   
  21. import org.apache.tapestry.html.BasePage;  
  22.   
  23. import org.apache.tapestry.multipart.MultipartDecoder;  
  24.   
  25. import org.apache.tapestry.request.IUploadFile;  
  26.   
  27.    
  28.   
  29. public abstract class UploadFile extends BasePage implements  
  30.   
  31.        PageBeginRenderListener {  
  32.   
  33.     @InjectObject("infrastructure:multipartDecoder")  
  34.   
  35.     public abstract MultipartDecoder getDecoder();  
  36.   
  37.    
  38.   
  39.     public void pageBeginRender(PageEvent event) {  
  40.   
  41.        IUploadFile file = getDecoder().getFileUpload("Filedata");  
  42.   
  43.        saveFile(file);  
  44.   
  45.     }  
  46.   
  47.    
  48.   
  49.     private void saveFile(IUploadFile uploadFile) {  
  50.   
  51.        File file = new File("whichFileYourWantToSave");  
  52.   
  53.        InputStream input = uploadFile.getStream();  
  54.   
  55.        try {  
  56.   
  57.            FileOutputStream output = new FileOutputStream(file);  
  58.   
  59.            IOUtils.copy(input, output);  
  60.   
  61.        } catch (FileNotFoundException e) {  
  62.   
  63.            e.printStackTrace();  
  64.   
  65.        } catch (IOException e) {  
  66.   
  67.            e.printStackTrace();  
  68.   
  69.        } finally {  
  70.   
  71.            IOUtils.closeQuietly(input);  
  72.   
  73.        }  
  74.   
  75.     }  
  76.   
  77. }  

<o:p></o:p>

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

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

跳转论坛:
Global site tag (gtag.js) - Google Analytics