Flex中使用FileReference类多文件上传

最新推荐文章于 2024-11-05 17:05:36 发布

narutobing

最新推荐文章于 2024-11-05 17:05:36 发布

阅读量810

点赞数

分类专栏： flex 文章标签： flex function application encoding 服务器 file

flex 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical" horizontalAlign="left" fontSize="12"
initialize="init()"
viewSourceURL="srcview/index.html">
<mx:NumberFormatter id="filesizeFormatter" useThousandsSeparator="true"/>
<mx:Script>
<![CDATA[
import mx.events.CollectionEvent;
import mx.formatters.NumberFormatter;
import mx.formatters.CurrencyFormatter;
import mx.collections.ArrayCollection;
import mx.controls.Alert;
private var fileRefs: FileReferenceList = new FileReferenceList();
//这个地址是我测试用的服务器地址
private var urlrequest: URLRequest = new URLRequest("http://localhost:8080/abc/UploadFile");
[Bindable]
private var selectedFiles: ArrayCollection = new ArrayCollection([]);
private var singleThreadFiles: Array = [];
[Bindable]
private var useSingleThread: Boolean = true;
private function init(): void
{
Security.allowDomain("*");
fileRefs.addEventListener(Event.SELECT, fileSelectHandler);
fileRefs.addEventListener(IOErrorEvent.IO_ERROR, ioErrorHandler);
fileRefs.addEventListener(Event.COMPLETE, completeHandler);
addEventListener(IOErrorEvent.IO_ERROR, ioErrorHandler);
}
private function selectFile(): void
{
fileRefs.browse([new FileFilter("Images (*.jpg, *.jpeg, *.gif, *.png)", "*.jpg;*.jpeg;*.gif;*.png"),
new FileFilter("所有文件(*.*)", "*.*")
]);
}
private function fileSelectHandler(event: Event): void
{
for each (var f: FileReference in fileRefs.fileList)
{
selectedFiles.addItem(f);
}
}
private function uploadFile(): void
{
for each (var f: FileReference in selectedFiles)
{
try
{
f.upload(urlrequest);
}
catch (e: Error)
{
Alert.show(e.message);
}
}
}
private function singleThreadUploadFile(): void
{
//FIFO：逐个从列表中取出，进行同步上传
if (singleThreadFiles.length > 0)
{
var f: FileReference = singleThreadFiles.pop() as FileReference;
f.addEventListener(Event.COMPLETE, doSingleUploadFileComplete);
f.upload(urlrequest);
}
}
private function doSingleUploadFileComplete(event: Event): void
{
var f: FileReference = event.target as FileReference;
f.removeEventListener(Event.COMPLETE, doSingleUploadFileComplete);
singleThreadUploadFile();
}
private function ioErrorHandler(e:IOErrorEvent): void
{
Alert.show(e.text);
}
private function completeHandler(e: Event): void
{
img.source = e.target.data;
}
private function showImage(e: Event): void
{
var f: FileReference = (e.target as DataGrid).selectedItem as FileReference;
f.addEventListener(Event.COMPLETE, completeHandler);
//f.load();
}
public function removeFile(f: FileReference): void
{
var index: int = selectedFiles.getItemIndex(f);
if (index != -1)
selectedFiles.removeItemAt(index);
}
]]>
</mx:Script>
<mx:VBox>
<mx:HBox width="100%">
<mx:Button id="selectFileButton" label="浏览" click="selectFile()"/>
<mx:Box width="100%" horizontalAlign="right">
<mx:Button click="selectedFiles.removeAll();" label="清空"/>
</mx:Box>
</mx:HBox>
<mx:DataGrid id="files" dataProvider="{selectedFiles}" change="showImage(event)">
<mx:columns>
<mx:DataGridColumn width="150" headerText="文件名" dataField="name" />
<mx:DataGridColumn headerText="大小(字节)" dataField="size">
<mx:itemRenderer>
<mx:Component>
<mx:Label text="{outerDocument.filesizeFormatter.format(data.size)}" textAlign="right"/>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
<mx:DataGridColumn headerText="上传进度" width="300">
<mx:itemRenderer>
<mx:Component>
<mx:HBox fontSize="10" fontWeight="normal" fontThickness="1">
<mx:Script>
<![CDATA[
import flash.profiler.showRedrawRegions;
import mx.controls.Alert;
import mx.controls.ProgressBar;
private function initProgressBar(event: Event): void
{
//使progressbar与file关联，从而产生进度条
var pb: ProgressBar = event.target as ProgressBar;
pb.label = "%3%%";
pb.setProgress(0, 100);
var f: FileReference = data as FileReference;
//使用闭包方法，更新进度条
f.addEventListener(ProgressEvent.PROGRESS,
function(event: ProgressEvent): void
{
pb.setProgress(event.bytesLoaded, event.bytesTotal);
}
);
f.addEventListener(DataEvent.UPLOAD_COMPLETE_DATA,
function (event: DataEvent): void
{
//服务器端一定要返回数据，否则，这个方法就不起作用了
pb.label = event.data;
}
);
}
]]>
</mx:Script>
<mx:ProgressBar verticalCenter="true" width="100%" paddingLeft="5" paddingRight="5"
maximum="100" minimum="0" labelPlacement="center" mode="manual"
label="%3%%" textAlign="left"
creationComplete="initProgressBar(event)"/>
<mx:LinkButton label="Cancel">
<mx:click>
<![CDATA[
var f: FileReference = data as FileReference;
f.cancel();
]]>
</mx:click>
</mx:LinkButton>
<mx:LinkButton label="Delete">
<mx:click>
<![CDATA[
var f: FileReference = data as FileReference;
outerDocument.removeFile(f);
]]>
</mx:click>
</mx:LinkButton>
</mx:HBox>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
</mx:columns>
</mx:DataGrid>
</mx:VBox>
<mx:HBox>
<mx:Button label="上传">
<mx:click>
<![CDATA[
if (useSingleThread)
{
//逐个上传
singleThreadFiles = selectedFiles.toArray().concat();
singleThreadFiles.reverse();
singleThreadUploadFile();
}
else
{
//多个文件同时上传
uploadFile();
}
]]>
</mx:click>
</mx:Button>
<mx:CheckBox id="checkboxSingleThread" label="同时上传多个文件" selected="{!useSingleThread}"
change="useSingleThread = !checkboxSingleThread.selected"/>
</mx:HBox>
<mx:Image id="img" width="400" height="300"/>
</mx:Application>