在Tapestry4中使用SWFUpload上传文件

阅读更多

    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容器。其他的回调函数是示例中的代码，定制一下的话，可以实现很好的效果。

第四步：编写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 或者组件都是
可以的，再让美工做个好点的图标，在回调函数中写一些效果，最终可以作出很好的文件上传页面。