显示文件上传进度条答案

【问题标题】：Displaying progressbar for file upload显示文件上传进度条
【发布时间】：2026-01-23 06:25:01
【问题描述】：

我需要创建一个应用程序，我可以在其中添加要上传的文件。当我添加要上传的项目时，应该显示一个进度条以及添加的每个项目。而当我点击文件上传时，每个文件的文件上传进度应该都会在进度条中体现出来。进度应该使用类似的函数

.....
addEventListener(ProgressEvent.Progress, uploadProgressHandler);

private function uploadProgressHandler(event:ProgressEvent):void
{
    var numPerc:Number = Math.round((Number(event.bytesLoaded) / Number(event.bytesTotal)) * 100);

    //this.progBar.validateNow();

    .....
}

谁能帮帮我？

【问题讨论】：

标签： apache-flex file-upload progress-bar

【解决方案1】：

查看这些示例：

Multiple File Upload with Flex and PHP
看起来像这样：

Multiple File Upload With Progress Bar Using Flash and ASP.NET
看起来像这样：

【讨论】：

【解决方案2】：

Flex 有一个 ProgressBar 类，你检查了吗？

【讨论】：

是的，我也用过。我的要求是为添加到上传列表的每个项目显示进度条，添加一个进度条并在每个进度条中显示进度。

【解决方案3】：

这里有两个很好的 Flex 文件上传器示例（使用 HTTP）：

alt text http://blog.vixiom.com/uploads/merb_air_upload.png

为了使以上两个示例协同工作以达到预期的效果（多个文件上传器，每个预加载器一个 ProgressBar，在 Flex 中），您需要做的就是：

下载Flex File Uploader PHP Project
下载Merb AIR Uploader并将“UploadProgressComponent.mxml”复制/粘贴到PHP项目的某处（现在复制到src/UploadProgressComponent.mxml）。
在 Flex File Uploader PHP 项目的 FileUpload.mxml 中将 DataGrid 替换为 List 和 Custom ItemRenderer。

替换这个：

<mx:DataGrid id="listFiles" left="0" top="0" bottom="0" right="0"  
 allowMultipleSelection="true" verticalScrollPolicy="on"
 draggableColumns="false" resizableColumns="false" sortableColumns="false">
    <mx:columns>
        <mx:DataGridColumn headerText="File" dataField="name" wordWrap="true"/>
        <mx:DataGridColumn headerText="Size" dataField="size" width="75" textAlign="right"/>
    </mx:columns>
</mx:DataGrid>

用这个：

<mx:List id="listFiles" left="0" top="0" bottom="0" right="0"
 allowMultipleSelection="true" verticalScrollPolicy="on"
 itemRenderer="UploadProgressComponent"/>

结果：Flex 中的多个文件上传器，带有一个自定义 ItemRenderer，每个 FileReference 都有一个 ProgressBar。上传到 PHP 脚本，您可以将其替换为任何内容。

应该很容易从那里进行自定义。让我知道这是否有效，兰斯

【讨论】：

我已经完成了，但我的要求与此完全不同。我需要添加到列表中的每个文件的进度条，每个文件上传的进度显示在相应的进度条中，而在您提供给我的链接中，进度显示在同一个进度条中。
更新的链接示例显示了如何为每个文件创建一个进度条，应该这样做！
感谢您的支持。但是，我正在使用 Flex 2 actionscript，但由于脚本“App.as”中的 WindowedApplication 而出现错误。所以，我的问题还是没有解决。
尝试上述解决方案。您可能会遇到错误，因为我还没有构建整个东西，但它正在为我工作！尝试尝试一下，根据需要进行调试，并让我知道它是否解决了您的问题（或者让您走上正确的轨道，甚至更好）。欢呼
感谢您的帮助。但是第一个解决方案，即链接“weblog.cahlan.com/files/FileUpload/FileUploadApp.html”给出了一个提示，以实现我创建用于上传带有进度条的文件的应用程序的任务。干杯。