- 浏览: 63782 次
- 性别:
- 来自: 上海
文章分类
最新评论
以下是一个.net的实例,(基本和java的相同,出现的问题是一样!)
我们从flex客户端开始,看看客户端是通过什么方式想服务端发起请求。flex客户端要完成文件上传下载都是通过filerefudderence来实现,首先得定义一个该类型对象实例:
private var statetext:string = "请选择一个文件上传";
//通过调用file对象的方法来完成上传和下载功能
private var file:filereference = new filereference();
复制代码
上传文件通常涉及到的有选择文件、上传文件以及上传完成这些最基本的处理过程。ok,下面我们就以这三个过程为例来看看flex是怎么来完成文件的上传功能。首先为这三个功能点分别添加监听事件处理函数 ,在程序
加载时调用:
internal function initapp():void
{
file.addeventlistener(event.select,onselected);
file.addeventlistener(event.complete,oncompleted);
file.addeventlistener(progressevent.progress,onprogress);
}
复制代码
另外我们也可以不用上面这中定义一个函数在程序加载时调用进行初始化操作,应用程序(mxml )的初始化操作又creationcomplete方法完成,另外还有一个比它先执行的方法createchildren(),我们可以直接在mxml下重写该方法来实现应用程序的初始化,如下:
/**
* createchildren 比 creationcomplete 事件更早发生
* */
protected override function createchildren():void
{
file.addeventlistener(event.select,onselected);
file.addeventlistener(event.complete,oncompleted);
file.addeventlistener(progressevent.progress,onprogress);
}
复制代码
这三个事件处理函数的详细定义如下(其中的statetext为string的变量,用于显示文件上传状态提示):
internal function onselected(evt:event):void
{
statetext = "选择了文件" + file.name;
}
internal function oncompleted(evt:event):void
{
statetext = "上传完毕!";
}
internal function onprogress(evt:progressevent):void
{
statetext = "已上传 " + math.round(100 * evt.bytesloaded / evt.bytestotal) + "%";
}
复制代码
到这里客户端就只差一步了,那就是完成发起上传请求的方法,实际上就是通过urlrequest对象创建一个与服务端的连接,然后直接调用fielreference类的upload()方法就可完成该功能,详细如下代码定义:
/**
* 调用filereference的实例方法upload()实现文件上传
* */
internal function onupload():void
{
if(file.size > 0)
{
statetext = "正在上传文件:" + file.name;
}
var request:urlrequest = new urlrequest();
request.url="http://localhost/web/uploadhandler.ashx";
file.upload(request);
}
复制代码
写好了upload方法,现在就是调用他了,通过按扭的click事件直接调用就可以,另外调用file.browse()方法则实现选择文件的功能,如下mxml代码描述:
<mx:textinput x="10" y="57" id="txtfile" text="{statetext}" width="229"/>
<mx:button x="247" y="57" label="选择" fontweight="normal" click="{file.browse()}"/>
<mx:button x="29" y="111" label="上传文件" width="111" fontweight="normal" click="onupload()"/>
复制代码
如上便完成了上传文件的flex客户端开发,通过file.upload()方法,将把选择的文件通过二进制的形式发送到指定的服务端,并自动传递一个叫 “filename”的参数,服务端通过filename便可以接收到客户端请求上传的文件。最后我们来看看服务端的 uploadhandler.ashx的详细定义:
public class uploadhandler : ihttphandler
{
//文件上传目录
private string uploadfolder = "upload";
public void processrequest(httpcontext context)
{
context.response.contenttype = "text/plain";
httpfilecollection files = context.request.files;
if (files.count > 0)
{
string path = context.server.mappath(uploadfolder);
httppostedfile file = files[0];
if (file != null && file.contentlength > 0)
{
string savepath = path + "/" + context.request.form["filename"];
file.saveas(savepath);
}
}
else
{
context.response.write("参数错误");
context.response.end();
}
}
public bool isreusable
{
get
{
return false;
}
}
}
复制代码
如上一系列的步骤便可完成上传文件的功能,下面便是上传文件示例程序运行 截图:
实现了文件上传下面来看看怎么实现文件下载, 以上面上传示例中上传的mp3为例,下面我们来看看怎么从服务器 (http://localhost/web/upload/做你的爱人.mp3)上完成文件(做你的爱人.mp3)的下载。
要实现文件下载对服务器端只要保证被下载文件存在就ok,同上传文件一样需要实例化一个fielreference对象的实例,并为其添加相应的事件处理函数:
private var filedown:filereference = new filereference();
/**
* createchildren 比 creationcomplete 事件更早发生
* */
protected override function createchildren():void
{
super.createchildren();
file.addeventlistener(event.select,onselected);
file.addeventlistener(event.complete,oncompleted);
file.addeventlistener(progressevent.progress,onprogress);
//实现文件下载
filedown.addeventlistener(event.complete,ondowncompleted);
filedown.addeventlistener(progressevent.progress,ondownprogress);
}
如上为实现下载文件的实例filedown注册了成功下载文件后事件处理函数和下载过程处理函数,下面是两个方法的详细定义:
internal function ondowncompleted(evt:event):void
{
var fileref:filereference = evt.currenttarget as filereference;
resultlabel.text = "文件名:" + fileref.name + "下载完毕!";
}
internal function ondownprogress(evt:progressevent):void
{
downstate.text = "已下载: " + math.round(100 * evt.bytesloaded / evt.bytestotal) + "%";
}
复制代码
完成了对象事件的开发,最后便上惩罚下载请求了,直接调用filereference类所提供的download()方法既可:
/**
* 调用filereference类的实例方法download()实现文件下载
* */
internal function ondownload():void
{
var request:urlrequest = new urlrequest();
request.url="http://localhost:1146/upload/做你的爱人.mp3";
filedown.download(request);
}
复制代码
程序执行到download()方法的时候会自动弹出选择保存文件对话框,根据实际情况选择好保存路径就ok。下面是实现上传和下载的完整代码:
实现上传和下载的完整代码
<?xml version="1.0" encoding="utf-8"?>
<mx:application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:panel x="49" y="66" width="551" height="164" layout="absolute"
title="使用filereference上传/下载文件" fontsize="12">
<mx:hdividedbox x="10" y="10" width="511" height="102">
<mx:canvas id="left" backgroundcolor="#d7f4ff" height="100%" width="209">
<mx:textinput x="4" y="20" id="txtfile" text="{statetext}" width="135"/>
<mx:button x="147" y="20" label="选择" fontweight="normal" click="{file.browse()}"/>
<mx:button x="31" y="68" label="上传文件" width="111" fontweight="normal" click="onupload()"/>
</mx:canvas>
<mx:canvas id="right" backgroundcolor="#d7f4ff" height="100%" width="282">
<mx:label x="6" y="9" text="http://localhost/web/upload/做你的爱人.mp3"/>
<mx:button x="10" y="37" label="下载文件" fontweight="normal" click="ondownload()"/>
<mx:label x="10" y="74" width="272" id="resultlabel"/>
<mx:textinput x="122" y="37" id="downstate"/>
</mx:canvas>
</mx:hdividedbox>
</mx:panel>
<mx:script>
<![cdata[
[bindable]
private var statetext:string = "请选择一个文件上传";
private var file:filereference = new filereference();
private var filedown:filereference = new filereference();
/**
* createchildren 比 creationcomplete 事件更早发生
* */
protected override function createchildren():void
{
super.createchildren();
file.addeventlistener(event.select,onselected);
file.addeventlistener(event.complete,oncompleted);
file.addeventlistener(progressevent.progress,onprogress);
filedown.addeventlistener(event.complete,ondowncompleted);
filedown.addeventlistener(progressevent.progress,ondownprogress);
}
// internal function initapp():void
// {
// file.addeventlistener(event.select,onselected);
// file.addeventlistener(event.complete,oncompleted);
// file.addeventlistener(progressevent.progress,onprogress);
// }
internal function onselected(evt:event):void
{
statetext = "选择了文件:" + file.name;
}
internal function oncompleted(evt:event):void
{
statetext = "上传完毕!";
}
internal function ondowncompleted(evt:event):void
{
var fileref:filereference = evt.currenttarget as filereference;
resultlabel.text = "文件名:" + fileref.name + "下载完毕!";
}
internal function onprogress(evt:progressevent):void
{
statetext = "已上传: " + math.round(100 * evt.bytesloaded / evt.bytestotal) + "%";
}
internal function ondownprogress(evt:progressevent):void
{
downstate.text = "已下载: " + math.round(100 * evt.bytesloaded / evt.bytestotal) + "%";
}
/**
* 调用filereference的实例方法upload()实现文件上传
* */
internal function onupload():void
{
if(file.size > 0)
{
statetext = "正在上传文件:" + file.name;
}
var request:urlrequest = new urlrequest();
request.url=http://localhost/web/uploadhandler.ashx;
file.upload(request);
}
/**
* 调用filereference类的实例方法download()实现文件下载
* */
internal function ondownload():void
{
var request:urlrequest = new urlrequest();
request.url="http://localhost/web/upload/做你的爱人.mp3";
filedown.download(request);
}
]]>
</mx:script>
</mx:application>
可能出现的问题:1.可以上传,但是下载报错??
可能是安全沙箱的问题(具体我也不太明白,总之是远程服务端权限问题),可以在服务端根目录添加crossdomain.xml文件
内容:
<?xml version="1.0" ?>
<cross-domain-policy>
<site-control permitted-cross-domain-policies="all" />
<allow-access-from domain="*" />
<allow-http-request-headers-from domain="*" headers="*" />
</cross-domain-policy>
2.英文可以,但是中文报错,或者没有反应??
这样是可以的:
public function download():void {
var url:String=encodeURI("/Download /使用方法.txt");
downloadURL = new URLRequest(url);
file = new FileReference();
configureListeners(file);
file.download(downloadURL,"使用方法.txt");//此处为文件名
}
我们从flex客户端开始,看看客户端是通过什么方式想服务端发起请求。flex客户端要完成文件上传下载都是通过filerefudderence来实现,首先得定义一个该类型对象实例:
private var statetext:string = "请选择一个文件上传";
//通过调用file对象的方法来完成上传和下载功能
private var file:filereference = new filereference();
复制代码
上传文件通常涉及到的有选择文件、上传文件以及上传完成这些最基本的处理过程。ok,下面我们就以这三个过程为例来看看flex是怎么来完成文件的上传功能。首先为这三个功能点分别添加监听事件处理函数 ,在程序
加载时调用:
internal function initapp():void
{
file.addeventlistener(event.select,onselected);
file.addeventlistener(event.complete,oncompleted);
file.addeventlistener(progressevent.progress,onprogress);
}
复制代码
另外我们也可以不用上面这中定义一个函数在程序加载时调用进行初始化操作,应用程序(mxml )的初始化操作又creationcomplete方法完成,另外还有一个比它先执行的方法createchildren(),我们可以直接在mxml下重写该方法来实现应用程序的初始化,如下:
/**
* createchildren 比 creationcomplete 事件更早发生
* */
protected override function createchildren():void
{
file.addeventlistener(event.select,onselected);
file.addeventlistener(event.complete,oncompleted);
file.addeventlistener(progressevent.progress,onprogress);
}
复制代码
这三个事件处理函数的详细定义如下(其中的statetext为string的变量,用于显示文件上传状态提示):
internal function onselected(evt:event):void
{
statetext = "选择了文件" + file.name;
}
internal function oncompleted(evt:event):void
{
statetext = "上传完毕!";
}
internal function onprogress(evt:progressevent):void
{
statetext = "已上传 " + math.round(100 * evt.bytesloaded / evt.bytestotal) + "%";
}
复制代码
到这里客户端就只差一步了,那就是完成发起上传请求的方法,实际上就是通过urlrequest对象创建一个与服务端的连接,然后直接调用fielreference类的upload()方法就可完成该功能,详细如下代码定义:
/**
* 调用filereference的实例方法upload()实现文件上传
* */
internal function onupload():void
{
if(file.size > 0)
{
statetext = "正在上传文件:" + file.name;
}
var request:urlrequest = new urlrequest();
request.url="http://localhost/web/uploadhandler.ashx";
file.upload(request);
}
复制代码
写好了upload方法,现在就是调用他了,通过按扭的click事件直接调用就可以,另外调用file.browse()方法则实现选择文件的功能,如下mxml代码描述:
<mx:textinput x="10" y="57" id="txtfile" text="{statetext}" width="229"/>
<mx:button x="247" y="57" label="选择" fontweight="normal" click="{file.browse()}"/>
<mx:button x="29" y="111" label="上传文件" width="111" fontweight="normal" click="onupload()"/>
复制代码
如上便完成了上传文件的flex客户端开发,通过file.upload()方法,将把选择的文件通过二进制的形式发送到指定的服务端,并自动传递一个叫 “filename”的参数,服务端通过filename便可以接收到客户端请求上传的文件。最后我们来看看服务端的 uploadhandler.ashx的详细定义:
public class uploadhandler : ihttphandler
{
//文件上传目录
private string uploadfolder = "upload";
public void processrequest(httpcontext context)
{
context.response.contenttype = "text/plain";
httpfilecollection files = context.request.files;
if (files.count > 0)
{
string path = context.server.mappath(uploadfolder);
httppostedfile file = files[0];
if (file != null && file.contentlength > 0)
{
string savepath = path + "/" + context.request.form["filename"];
file.saveas(savepath);
}
}
else
{
context.response.write("参数错误");
context.response.end();
}
}
public bool isreusable
{
get
{
return false;
}
}
}
复制代码
如上一系列的步骤便可完成上传文件的功能,下面便是上传文件示例程序运行 截图:
实现了文件上传下面来看看怎么实现文件下载, 以上面上传示例中上传的mp3为例,下面我们来看看怎么从服务器 (http://localhost/web/upload/做你的爱人.mp3)上完成文件(做你的爱人.mp3)的下载。
要实现文件下载对服务器端只要保证被下载文件存在就ok,同上传文件一样需要实例化一个fielreference对象的实例,并为其添加相应的事件处理函数:
private var filedown:filereference = new filereference();
/**
* createchildren 比 creationcomplete 事件更早发生
* */
protected override function createchildren():void
{
super.createchildren();
file.addeventlistener(event.select,onselected);
file.addeventlistener(event.complete,oncompleted);
file.addeventlistener(progressevent.progress,onprogress);
//实现文件下载
filedown.addeventlistener(event.complete,ondowncompleted);
filedown.addeventlistener(progressevent.progress,ondownprogress);
}
如上为实现下载文件的实例filedown注册了成功下载文件后事件处理函数和下载过程处理函数,下面是两个方法的详细定义:
internal function ondowncompleted(evt:event):void
{
var fileref:filereference = evt.currenttarget as filereference;
resultlabel.text = "文件名:" + fileref.name + "下载完毕!";
}
internal function ondownprogress(evt:progressevent):void
{
downstate.text = "已下载: " + math.round(100 * evt.bytesloaded / evt.bytestotal) + "%";
}
复制代码
完成了对象事件的开发,最后便上惩罚下载请求了,直接调用filereference类所提供的download()方法既可:
/**
* 调用filereference类的实例方法download()实现文件下载
* */
internal function ondownload():void
{
var request:urlrequest = new urlrequest();
request.url="http://localhost:1146/upload/做你的爱人.mp3";
filedown.download(request);
}
复制代码
程序执行到download()方法的时候会自动弹出选择保存文件对话框,根据实际情况选择好保存路径就ok。下面是实现上传和下载的完整代码:
实现上传和下载的完整代码
<?xml version="1.0" encoding="utf-8"?>
<mx:application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:panel x="49" y="66" width="551" height="164" layout="absolute"
title="使用filereference上传/下载文件" fontsize="12">
<mx:hdividedbox x="10" y="10" width="511" height="102">
<mx:canvas id="left" backgroundcolor="#d7f4ff" height="100%" width="209">
<mx:textinput x="4" y="20" id="txtfile" text="{statetext}" width="135"/>
<mx:button x="147" y="20" label="选择" fontweight="normal" click="{file.browse()}"/>
<mx:button x="31" y="68" label="上传文件" width="111" fontweight="normal" click="onupload()"/>
</mx:canvas>
<mx:canvas id="right" backgroundcolor="#d7f4ff" height="100%" width="282">
<mx:label x="6" y="9" text="http://localhost/web/upload/做你的爱人.mp3"/>
<mx:button x="10" y="37" label="下载文件" fontweight="normal" click="ondownload()"/>
<mx:label x="10" y="74" width="272" id="resultlabel"/>
<mx:textinput x="122" y="37" id="downstate"/>
</mx:canvas>
</mx:hdividedbox>
</mx:panel>
<mx:script>
<![cdata[
[bindable]
private var statetext:string = "请选择一个文件上传";
private var file:filereference = new filereference();
private var filedown:filereference = new filereference();
/**
* createchildren 比 creationcomplete 事件更早发生
* */
protected override function createchildren():void
{
super.createchildren();
file.addeventlistener(event.select,onselected);
file.addeventlistener(event.complete,oncompleted);
file.addeventlistener(progressevent.progress,onprogress);
filedown.addeventlistener(event.complete,ondowncompleted);
filedown.addeventlistener(progressevent.progress,ondownprogress);
}
// internal function initapp():void
// {
// file.addeventlistener(event.select,onselected);
// file.addeventlistener(event.complete,oncompleted);
// file.addeventlistener(progressevent.progress,onprogress);
// }
internal function onselected(evt:event):void
{
statetext = "选择了文件:" + file.name;
}
internal function oncompleted(evt:event):void
{
statetext = "上传完毕!";
}
internal function ondowncompleted(evt:event):void
{
var fileref:filereference = evt.currenttarget as filereference;
resultlabel.text = "文件名:" + fileref.name + "下载完毕!";
}
internal function onprogress(evt:progressevent):void
{
statetext = "已上传: " + math.round(100 * evt.bytesloaded / evt.bytestotal) + "%";
}
internal function ondownprogress(evt:progressevent):void
{
downstate.text = "已下载: " + math.round(100 * evt.bytesloaded / evt.bytestotal) + "%";
}
/**
* 调用filereference的实例方法upload()实现文件上传
* */
internal function onupload():void
{
if(file.size > 0)
{
statetext = "正在上传文件:" + file.name;
}
var request:urlrequest = new urlrequest();
request.url=http://localhost/web/uploadhandler.ashx;
file.upload(request);
}
/**
* 调用filereference类的实例方法download()实现文件下载
* */
internal function ondownload():void
{
var request:urlrequest = new urlrequest();
request.url="http://localhost/web/upload/做你的爱人.mp3";
filedown.download(request);
}
]]>
</mx:script>
</mx:application>
可能出现的问题:1.可以上传,但是下载报错??
可能是安全沙箱的问题(具体我也不太明白,总之是远程服务端权限问题),可以在服务端根目录添加crossdomain.xml文件
内容:
<?xml version="1.0" ?>
<cross-domain-policy>
<site-control permitted-cross-domain-policies="all" />
<allow-access-from domain="*" />
<allow-http-request-headers-from domain="*" headers="*" />
</cross-domain-policy>
2.英文可以,但是中文报错,或者没有反应??
这样是可以的:
public function download():void {
var url:String=encodeURI("/Download /使用方法.txt");
downloadURL = new URLRequest(url);
file = new FileReference();
configureListeners(file);
file.download(downloadURL,"使用方法.txt");//此处为文件名
}
相关推荐
Flex与.NET互操作(五):使用FileReference+HttpHandler实现文件上传/下载 一文的源码的完整工程文件,包含FLEX客户端和 ASP.NET服务端源码! 在VS2010和FLash builder4 中运行!
### Flex与.NET互操作:使用FileReference+HttpHandler实现文件上传/下载 #### 一、引言 在Flex的应用开发中,与ASP.NET、JSP、PHP等Web应用一样,经常会遇到需要处理文件上传和下载的需求。Adobe Flex是一种用于...
在Flex中实现多文件上传,通常涉及到ActionScript编程、组件使用以及与服务器端的交互。下面将详细介绍如何使用Flex来实现这个功能。 一、Flex中的文件选择组件 在Flex中,我们可以使用`FileReference`类来处理文件...
本主题聚焦于使用Flex实现这一功能,并结合MD5验证确保文件上传的完整性和安全性。Flex是一种基于ActionScript的开源框架,用于构建富互联网应用程序(RIA),它可以提供丰富的用户体验并与后端服务器进行交互。 ...
在 Flex 中,文件上传主要通过 `FileReference` 类实现。以下是一段示例代码: ```xml <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> <![CDATA[ import mx.controls.Alert; ...
本篇文章将详细讲解如何实现"flex文件上传下载,在线以pdf形式浏览文件"这一功能。 首先,让我们了解一下“flex”在这里的含义。Flex通常指的是Adobe Flex,一个用于构建富互联网应用(RIA)的开源框架。它基于...
1. **避免使用`FileReference`**:最简单粗暴的方法是直接放弃使用`FileReference`上传文件,转而采用传统的表单提交(`form post`)方式进行文件上传。这种方法能够确保上传过程与普通HTML页面一致,并且能更好地处理...
在本示例中,我们将讨论如何使用Flex客户端实现文件上传功能,并将其发送到Java服务器。 首先,我们需要了解Flex中的FileReference类。这个类是Flash Player API的一部分,允许用户从本地文件系统选择文件并进行...
### Flex与Servlet结合实现文件上传及下载功能 在Flex与Servlet技术结合的背景下,本文将详细介绍如何通过这两种技术实现文件的上传与下载功能。通过分析提供的代码片段,我们可以看到一个典型的Flex应用程序界面...
总的来说,理解和实现Flex与Java结合的文件上传功能需要掌握前端的Flex编程、后端的Java Servlet或Spring MVC技术,以及HTTP协议的基础知识。同时,熟悉文件I/O操作、安全性考量和用户界面设计也是必不可少的。通过...
在本文中,我们将深入探讨基于Flex的文件上传和下载功能,以及如何利用FileReference类来实现这一过程。Flex是Adobe Flash Platform的一部分,它提供了一种强大的方式来构建富互联网应用程序(RIA)。在Flex中,我们...
在Flex中实现文件上传和进度显示,通常涉及到多个技术层面,包括客户端的用户界面设计、服务器端的数据处理以及通信协议的使用。以下是关于这个主题的详细知识点: 1. **Flex组件库**:Flex提供了一套丰富的组件库...
在Flex中实现文件上传,主要涉及以下几个关键知识点: 1. **组件库**:Flex SDK提供了许多内置组件,如Button、Label、ProgressBar等,我们可以利用这些组件来构建文件上传的界面。例如,Button用于触发文件选择,...
文件`Flex与_NET互操作 使用FileReference+HttpHandler实现文件上传-下载_Flex_脚本之家.htm`可能包含一个完整的示例代码,演示了如何在Flex中使用`FileReference`类与.NET的HttpHandler协同工作,实现文件的上传和...
在Flex3中,文件上传主要通过Flash Player的FileReference类来实现。FileReference允许用户选择本地文件,并提供了upload()方法来将文件发送到服务器。以下是一些关键步骤: 1. **创建FileReference对象**:在Flex3...
在这个"flex4 remoteobject 多文件上传的例子"中,我们将重点探讨如何使用RemoteObject组件来实现多文件的上传,并且在上传过程中显示进度信息。 首先,我们要理解RemoteObject的工作原理。RemoteObject通过HTTP、...
总结,这个项目结合了Flex的富客户端功能和Java的后端处理能力,实现了Web端的文件上传和下载。对于更复杂的应用场景,可能还需要考虑多文件上传、断点续传、文件预览、权限控制等额外功能。同时,随着Flash逐渐被...
综上所述,Flex3和Java文件上传涉及前端的用户交互和后端的数据处理,需要理解Flex的ActionScript3编程、文件上传机制以及Java Web服务的实现。同时,安全性、性能和用户体验也是设计此类系统时必须考虑的重要因素。
在本文中,我们将深入探讨如何实现Flex与Java Servlet结合进行文件上传。首先,我们需要了解Flex是一种基于Adobe AIR的开源框架,用于构建富互联网应用程序(RIA),而Java Servlet是Java平台上的一个标准,用于处理...