技术前沿 Flex2.0 从零开始实现文件上传-flex读取文件

Flex2.0有很多值得学习的地方，本文和大家重点讨论一下如何实现Flex2.0 从零开始实现文件上传，相信本文介绍一定会让你有所收获。

Flex2.0 从零开始实现文件上传

以前在Flex1.5的时候也做过，不过当初使用的是oreilly的cos.jar。而且Flex1.5的时候在as里面无法直接引用FileReference类，只能写一个上传的as文件编译成swf文件，然后load这个swf文件来实现上传。

Flex2.0Release之后用oreilly的上传包做了一下上传，成功。于是回到apache的common-fileupload-1.1.1来研究上传。终于有了成果。再加上一直以来游走于各个论坛，发现好多工友对Flex2.0实现文件上传都很感兴趣。于是决定花一点时间将自己的成果跟大家分享一下。

1．环境的安装以及配置就不说了，网上很多地方可以找到。（我的是：JDK1.4.2，FlexBuilder2，Flex2SDK，Tomcat4.1，Eclips3.0.1，不过据说现在Flex2.0要使用RemoteObject的话需要安装JDK1.5）。

2．首先在Eclips中创建一个tomcat工程，例如取名为FileUpload。

3．找到FlexSDK安装目录，将flex.war拷贝出来更名为flex.rar。解开这个包。将里面的META-INF以及WEB-INF文件夹拷贝到Eclips的工作目录（我的是：d:workspaces）----即刚才创建的FileUpload目录下。

4．FlexBuilder2下创建一个新的工程。

5．工程中引入common-fileupload-1.1.1.jar以及common-io-1.2.jar（没有的话去http://www.apache.org下载）。#p#

6．编写上传servletmyUpload.java代码如下(上传文件存放路径为：d:upload)：

packagecom.fileupload;  
importjava.io.File;  
importjava.io.IOException;  
importjava.util.Iterator;  
importjava.util.List;importjavax.servlet.  
ServletException;  
importjavax.servlet.http.HttpServlet;  
importjavax.servlet.http.HttpServletRequest;  
importjavax.servlet.http.HttpServletResponse;  
importorg.apache.commons.fileupload.FileItem;  
importorg.apache.commons.fileupload.FileUploadException;  
importorg.apache.commons.fileupload.disk.  
DiskFileItemFactory;  
importorg.apache.commons.fileupload.servlet.  
ServletFileUpload;  
publicclassmyUploadextendsHttpServlet{  
privateStringuploadPath="D:\\upload\\";  
privateintmaxPostSize=100*1024*1024;  
publicvoiddoPost(HttpServletRequestreq,HttpServletResponseres)  
throwsServletException,IOException{  
res.setContentType("text/html;charset=UTF-8");  
 
DiskFileItemFactoryfactory=newDiskFileItemFactory();  
factory.setSizeThreshold(4096);  
ServletFileUploadupload=newServletFileUpload(factory);  
upload.setSizeMax(maxPostSize);  
try{  
ListfileItems=upload.parseRequest(req);  
Iteratoriter=fileItems.iterator();  
while(iter.hasNext()){  
FileItemitem=(FileItem)iter.next();  
if(!item.isFormField()){  
Stringname=item.getName();  
try{  
item.write(newFile(uploadPath+name));  
}catch(Exceptione){  
e.printStackTrace();  
}  
}  
}  
}catch(FileUploadExceptione){  
e.printStackTrace();  
}  
}  
}

存放在../src/com/fileupload

7．在web.xml中加入如下代码。（用于调用servlet）

<servlet> 
<servlet-name>myUpload</servlet-name> 
<display-name>FileUploadServlet</display-name> 
<description>FileServletExample</description> 
<servlet-class>com.fileupload.myUpload</servlet-class> 
</servlet> 
<servlet-mapping> 
<servlet-name>myUpload</servlet-name> 
<url-pattern>/myUpload</url-pattern> 
</servlet-mapping>

#p#8．前台的FileUpload.mxml文件代码如下：

<?xmlversionxmlversion="1.0"encoding="utf-8"?> 
<mx:Applicationxmlns:mxmx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml" 
xmlns="*"creationComplete="init()"> 
<mx:Script> 
<![CDATA[  
importflash.events.*;  
importflash.net.FileReference;  
importflash.net.URLRequest;  
privatevarcurrentAction:String;  
privatevaruploadURL:URLRequest;  
privatevarfile:FileReference;  
 
privatevarfileName:String;  
privatefunctioninit():void{  
file=newFileReference();  
}  
 
publicfunctionFileReference_browse():void{  
currentAction="upload";  
uploadURL=newURLRequest();  
file=newFileReference();  
configureListeners(file);  
file.browse();  
}  
privatefunctionconfigureListeners(dispatcher:IEventDispatcher):void{  
dispatcher.addEventListener(Event.SELECT,selectHandler);  
}  
privatefunctionselectHandler(event:Event):void{  
varfile:FileReference=FileReference(event.target);  
if(currentAction=="upload"){  
uploadURL.url="myUpload?path=work&filename="+file.name;  
file.upload(uploadURL);  
}  
}  
]]> 
</mx:Script> 
<mx:Panelwidthmx:Panelwidth="100%"height="100%"> 
<mx:VBoxwidthmx:VBoxwidth="100%"horizontalAlign="center"> 
<mx:Labeltextmx:Labeltext=  
"Clickthebelowbuttontoselectafilewhichyouwanttoupload!"/> 
<mx:Buttonlabelmx:Buttonlabel="Upload"click="FileReference_browse()"/> 
</mx:VBox> 
</mx:Panel> 
</mx:Application>

9．开启tomcat，运行。大功告成！

【编辑推荐】