Flex中的资料上传与下载

Flex中的文件上传与下载

www.diy567.com累了，去上面休息一下下,QQ空间，美文，非主流，网络日记，搞笑短信，祝福短信，热门短信，有意思啊

和传统的JSP一样，在flex中，有的时候也需要实现文件上传和下载的功能，但是在flex里文件的上传和下载的实现相对来说比较复杂，如何实现，请看下面。

由于flex是一个比较新的技术，在研究的时候，还是按着JSP的方式去尝试，在开始之初，主要有以下几种思路：

A、利用ftp的方式进行文件的上传和下载，需要利用flex的socket接口。

B、利用webService的方式来进行文件的上传和下载

C、利用flex+sevlet+fileupload组件实现文件的上传和下载

在通过比较后，最后选择了第三种，用Flex+sevlet的方式来完成文件上传和下载的功能，理由如下（与上面的思路相对应）：

A、涉及到了流的操作，实现起来比较复杂，出现错误的几率比较高

B、关于flex端的可参考的资料比较少，并且还需要启动webservice服务

C、这个技术比较成熟，从flex2.0开始，在flex端已经可以引用FileReference类了，并且在java端有成熟的组件可以使用，所以最后考虑使用该种方法来处理。

一、文件的上传
1、Flex端
A、使用到的类介绍：
FileReference 类提供了在用户计算机和服务器之间上载和下载文件的方法。 操作系统对话框会提示用户选择要上载的文件或用于下载的位置。它主要能实现一个文件的上传。
FileReferenceList 类提供了让用户选择一个或多个要上载的文件的方法。 FileReferenceList 对象将用户磁盘上的一组本地文件（一个或多个文件）表示为 FileReference 对象的数组。
B、使用 FileReferenceList 类 实现多文件上传：
1) 将该类实例化：var myFileRef = new FileReferenceList();
2) 调用 FileReferenceList.browse() 方法，该方法将打开一个对话框，让用户选择一个或多个要上载的文件：myFileRef.browse();
3) 在成功调用 browse() 方法之后，使用 FileReference 对象数组来填充 FileReferenceList 对象的 fileList 属性。
对 fileList 数组中的每个元素调用 FileReference.upload()

代码如下：

/***//**
*执行上传操作
**/
privatefunctionupLoadFiles():void
{
try
{
selectFileList.browse(newArray(imageFilter,textFilter));
selectFileList.addEventListener(Event.SELECT,selectHandler1);
}
catch(error:Error)
{
Alert.show("文件选择出现错误，请选择正确的文件");
}
}
/***//**
*如果文件被选中,则执行该方法
**/
functionselectHandler1(event:Event):void
{
varrequest:URLRequest=newURLRequest("FileUploadServlet");
varupLoadFile:FileReference;
varupLoadFileList:FileReferenceList=FileReferenceList(event.target);
varselectedFileArray:Array=upLoadFileList.fileList;
login=(testPress)(PopUpManager.createPopUp(this,testPress,true));
for(vari:uint=0;i<selectedFileArray.length;i++)
{
upLoadFile=FileReference(selectedFileArray[i]);
upLoadFile.addEventListener(Event.COMPLETE,UpLoadcompleteHandler);
upLoadFile.addEventListener(ProgressEvent.PROGRESS,progressHandler);
try
{
upLoadFile.upload(request);
}
catch(error:Error)
{
Alert.show(error.message.toString());
}
}
}
functionUpLoadcompleteHandler(event:Event):void
{
varupLoadFiles:FileReference=FileReference(event.target);
varfileNames=upLoadFiles.name;
//Alert.show('文件'+fileNames+'上传成功')
login.myLabels.text='文件'+fileNames+'上传成功';
}
privatefunctionprogressHandler(e:ProgressEvent):void
{
varproc:uint=e.bytesLoaded/e.bytesTotal*100;
login.bar.setProgress(proc,100);
login.bar.label="当前进度:"+""+proc+"%";
}

testPress.mxml

<?xmlversion="1.0"encoding="utf-8"?>
<mx:TitleWindowxmlns:mx="http://www.adobe.com/2006/mxml"layout="absolute"width="528"height="236">
<mx:Script>
<![CDATA[
importmx.managers.PopUpManager;
publicfunctionclickMe():void{
PopUpManager.removePopUp(this);
}
]]>
</mx:Script>
<mx:ProgressBarid="bar"labelPlacement="bottom"themeColor="#F20D7A"
minimum="0"visible="true"maximum="100"label="当前进度:0%"
direction="right"mode="manual"width="200"x="154"y="84"/>
<mx:Buttonx="221"y="135"label="关闭"click="clickMe();"/>
<mx:Labelx="173"y="27"id="myLabels"width="157"/>

</mx:TitleWindow>

2、JAVA端

接受Flex端的请求，在JAVA端利用apache的fileupload类库实现上传功能。代码如下：

?

importjava.io.File;
importjava.io.FileInputStream;
importjava.io.IOException;
importjava.io.InputStream;
importjava.util.Iterator;
importjava.util.List;
importjava.util.Properties;

importjavax.servlet.ServletContext;
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;

publicclassFileUploadServletextendsHttpServlet
{

//privateStringuploadPath="D:\\upload\";
privateStringpath="file_path.properties";
privateStringskStr="";
privateStringuploadPath="";
privateintmaxPostSize=1000*1024*1024;

publicvoiddoPost(HttpServletRequestreq,HttpServletResponseres)throwsServletException,
IOException
{
StringfilePathaa=this.getServletConfig().getServletContext().getRealPath("/");

Propertiesp=loadProperties(path);

uploadPath=p.getProperty("filepath");

res.setContentType("text/html;charset=UTF-8");
req.setCharacterEncoding("UTF-8");

DiskFileItemFactoryfactory=newDiskFileItemFactory();
factory.setSizeThreshold(1024*20);

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
{
FileskFile=newFile(uploadPath+name);
if(skFile.exists())
{
skFile.delete();
item.write(newFile(uploadPath+name));

}
else
{
item.write(newFile(uploadPath+name));
}

}catch(Exceptione)
{
e.printStackTrace();
}
}
}
}catch(FileUploadExceptione)
{
e.printStackTrace();
}

}

publicPropertiesloadProperties(Stringpath)throwsIOException
{

InputStreamin=this.getClass().getResourceAsStream(path);
//

Propertiesp=newProperties();

p.load(in);
in.close();
returnp;
}

}

还要修正web.xml，添加如下内容

?

<!--Forfileuploaded-->
<servlet>
<servlet-name>FileUploadServlet</servlet-name>
<servlet-class>FileUploadServlet</servlet-class>
</servlet>

<servlet-mapping>
<servlet-name>FileUploadServlet</servlet-name>
<url-pattern>/FileUploadServlet</url-pattern>
</servlet-mapping>

二、文件的下载

调用的方法：private function downLoadFiles(urlAdd:String):void
参数urlAdd就是用户的ip地址，如果使用本地的localhost就会产生安全沙箱问题，因此让用户自己输入自己的ip地址。这样就避免了安全沙箱的问题。如果是本机启动服务，访问地址，需要输入IP，不能用localhost来代替本机的IP地址，否则，还是会出现安全沙箱问题。

FileReference.download() 方法提示用户提供文件的保存位置并开始从远程 URL 进行下载。直接加载请求路径下载，不需要后台的支持。代码如下：

?

importcom.systex.flex.util.testPress;

importflash.net.FileReferenceList;

importmx.controls.Alert;
importmx.managers.PopUpManager;
varimageFilter:FileFilter=newFileFilter("ImageFiles(*.jpg,*.jpeg,*.gif,*.png)","*.jpg;*.jpeg;*.gif;*.png");
vartextFilter:FileFilter=newFileFilter("TextFiles(*.txt,*.rtf,*.zip)","*.txt;*.rtf;*.zip");
varselectFileList:FileReferenceList=newFileReferenceList();
varselectedFileArray:Array=newArray();
varlogin:testPress=newtestPress();
vardownloadURL:URLRequest;
varDownLoadfile:FileReference;//这是要主要的地方
//http://XX.XX.XX.XX:8080/upload/main.zip
privatefunctiondownLoadFiles(urlAdd:String):void
{
downloadURL=newURLRequest(urlAdd);
DownLoadfile=newFileReference();
configureListeners(DownLoadfile);
DownLoadfile.download(downloadURL);
}
privatefunctionconfigureListeners(dispatcher:IEventDispatcher):void{
dispatcher.addEventListener(Event.COMPLETE,completeHandler);

}

privatefunctioncompleteHandler(event:Event):void{
mx.controls.Alert.show("文件下载成功");
}

这里的是上面上传代码的上部分

附上测试的MXML

?

<?xmlversion="1.0"encoding="utf-8"?>
<mx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml"layout="absolute"
>
<mx:Scriptsource="UpDownLoadFiles.as"/>

<mx:Canvaswidth="100%"height="100%"x="10"y="170"fontSize="15">
<mx:VBoxwidth="100%"horizontalAlign="center">
<mx:TextInputid="mytextInput"/>
<mx:Buttonlabel="文件下载"click="downLoadFiles('http://'+mytextInput.text+':8080/downLoading/2MSN.rar');"

查看更多 下一篇