【IT168技术资讯】 以前在Flex 1.5的时候也做过,不过当初使用的是oreilly的cos.jar。而且Flex 1.5的时候在as里面无法直接引用FileReference类,只能写一个上传的as文件编译成swf文件,然后load这个swf文件来实现上传。当初的体验是:非常之不爽!
Flex 2.0 Release之后用oreilly的上传包做了一下上传,成功。于是回到apache的common-fileupload-1.1.1来研究上传。终于有了成果。再加上一直以来游走于各个论坛,发现好多工友对Flex 2.0实现文件上传都很感兴趣。于是决定花一点时间将自己的成果跟大家分享一下。
(PS:以下介绍的步骤都是傻瓜式的,初学者也能马上上手!)
1. 环境的安装以及配置就不说了,网上很多地方可以找到。(我的是:JDK1.4.2,Flex Builder 2,Flex 2 SDK,Tomcat 4.1,Eclips3.0.1,不过据说现在Flex 2.0要使用RemoteObject的话需要安装JDK1.5)。
2. 首先在Eclips中创建一个tomcat工程,例如取名为FileUpload。
3. 找到Flex SDK安装目录,将flex.war拷贝出来更名为flex.rar。解开这个包。将里面的META-INF 以及WEB-INF文件夹拷贝到Eclips的工作目录(我的是:d:workspaces)----即刚才创建的FileUpload目录下。
4. Flex Builder 2下创建一个新的工程。具体步骤如图。
5. 工程中引入common-fileupload-1.1.1.jar以及common-io-1.2.jar(没有的话去http://www.apache.org下载)。
6. 编写上传servlet myUpload.java 代码如下(上传文件存放路径为:d:upload):
import java.io.File;
import java.io.IOException;
import java.util.Iterator;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.FileUploadException;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;
public class myUpload extends HttpServlet {
private String uploadPath = "D:\\upload\\";
private int maxPostSize = 100 * 1024 * 1024;
public void doPost(HttpServletRequest req, HttpServletResponse res)
throws ServletException, IOException {
res.setContentType("text/html; charset=UTF-8");
DiskFileItemFactory factory = new DiskFileItemFactory();
factory.setSizeThreshold(4096);
ServletFileUpload upload = new ServletFileUpload(factory);
upload.setSizeMax(maxPostSize);
try {
List fileItems = upload.parseRequest(req);
Iterator iter = fileItems.iterator();
while (iter.hasNext()) {
FileItem item = (FileItem) iter.next();
if (!item.isFormField()) {
String name = item.getName();
try {
item.write(new File(uploadPath + name));
} catch (Exception e) {
e.printStackTrace();
}
}
}
} catch (FileUploadException e) {
e.printStackTrace();
}
}
}
存放在../src/com/fileupload
7. 在web.xml中加入如下代码。(用于调用servlet)
<servlet>
<servlet-name>myUpload</servlet-name>
<display-name>File Upload Servlet</display-name>
<description>File Servlet Example</description>
<servlet-class>com.fileupload.myUpload</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>myUpload</servlet-name>
<url-pattern>/myUpload</url-pattern>
</servlet-mapping>
8. 前台的FileUpload.mxml文件代码如下:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns="*" creationComplete="init()">
<mx:Script>
<![CDATA[
import flash.events.*;
import flash.net.FileReference;
import flash.net.URLRequest;
private var currentAction:String;
private var uploadURL:URLRequest;
private var file:FileReference;
private var fileName:String;
private function init() : void{
file = new FileReference();
}
public function FileReference_browse() : void {
currentAction = "upload";
uploadURL = new URLRequest();
file = new FileReference();
configureListeners(file);
file.browse();
}
private function configureListeners(dispatcher:IEventDispatcher):void {
dispatcher.addEventListener(Event.SELECT, selectHandler);
}
private function selectHandler(event:Event):void {
var file:FileReference = FileReference(event.target);
if(currentAction == "upload"){
uploadURL.url = "myUpload?path=work&filename=" + file.name;
file.upload(uploadURL);
}
}
]]>
</mx:Script>
<mx:Panel width="100%" height="100%">
<mx:VBox width="100%" horizontalAlign="center">
<mx:Label text="Click the below button to select a file which you want to upload!" />
<mx:Button label="Upload" click="FileReference_browse()" />
</mx:VBox>
</mx:Panel>
</mx:Application>
9. 开启tomcat,运行。大功告成!