php+flex打造多文件带进度超级上传

Home

Backend Development

PHP Tutorial

php+flex打造多文件带进度超级上传_PHP

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 01, 2016 pm 12:21 PM

最近我们西西弗斯工作室（北京网站建设）要做一个文件上传的功能，要求是可以批量上传，并且是大影音文件，于是在网上找了相关的资料和开源项目，进行了一些简单的改造。

效果截图：

flex的源码是：

以下为引用的内容：

大家可以看到_loc_1.path=this.parameters["file"]接收file参数,然后传入MultiFileUpload对象中,这个的意思是你可以通过页面来定义上传的目录.对于MultiFileUpload组件的源码如下:

///////////////////////////////////////////////////////////////////////////////////////////////////////////////////

// Multi-File Upload Component Ver 1.1

// This program is free software; you can redistribute it and/or

// modify it under the terms of the GNU General Public License

// as published by the Free Software Foundation; either version 2

// of the License, or (at your option) any later version.

// This program is distributed in the hope that it will be useful,

// but WITHOUT ANY WARRANTY; without even the implied warranty of

// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the

// GNU General Public License for more details.

// You should have received a copy of the GNU General Public License

// along with this program; if not, write to the Free Software

// Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.

// Any questions about this component can be directed to it's author Ryan Favro at ryanfavro@hotmail.com

// To use this component create a new instance of this component and give it ten parameters

// EXAMPLE:

// multiFileUpload = new MultiFileUpload(

// filesDG, //

// browseBTN, //

// clearButton, //

// delButton, //

// upload_btn, //

// progressbar, //

// "http://[Your Server Here]/MultiFileUpload/upload.cfm", //

// postVariables, //

// 350000, //

// filesToFilter //

// );

// Enjoy!

///////////////////////////////////////////////////////////////////////////////////////////////////////////////////

package com.newmediateam.fileIO {

// Imported Class Definitions

import mx.controls.DataGrid;

import mx.controls.Button;

import mx.controls.ProgressBar;

import mx.controls.ProgressBarMode;

import mx.controls.dataGridClasses.*;

import mx.controls.Alert;

import mx.events.CollectionEvent;

import mx.collections.ArrayCollection;

import flash.events.*;

import flash.net.FileReferenceList;

import flash.net.FileFilter;

import flash.net.FileReference;

import flash.net.URLRequest;

import flash.net.URLVariables;

public class MultiFileUpload {

//UI Vars

private var _datagrid:DataGrid;

private var _browsebutton:Button;

private var _remselbutton:Button;

private var _remallbutton:Button;

private var _uploadbutton:Button;

private var _progressbar:ProgressBar;

private var _testButton:Button;

//DataGrid Columns

private var _nameColumn:DataGridColumn;

private var _typeColumn:DataGridColumn;

private var _sizeColumn:DataGridColumn;

private var _creationDate:DataGridColumn;

private var _modificationDate:DataGridColumn;

private var _progressColumn:DataGridColumn;

private var _columns:Array;

//File Reference Vars

[Bindable]

private var _files:ArrayCollection;

private var _fileref:FileReferenceList

private var _file:FileReference;

private var _uploadURL:URLRequest;

private var _totalbytes:Number;

//File Filter vars

private var _filefilter:Array;

//config vars

private var _url:String; // location of the file upload handler can be a relative path or FQDM

private var _maxFileSize:Number; //bytes

private var _variables:URLVariables; //variables to passed along to the file upload handler on the server.

//Constructor

public function MultiFileUpload(

dataGrid:DataGrid,

browseButton:Button,

removeAllButton:Button,

removeSelectedButton:Button,

uploadButton:Button,

progressBar:ProgressBar,

url:String,

variables:URLVariables,

maxFileSize:Number,

filter:Array

){

_datagrid = dataGrid;

_browsebutton = browseButton;

_remallbutton = removeAllButton;

_remselbutton = removeSelectedButton;

_uploadbutton = uploadButton;

_url = url;

_progressbar = progressBar;

_variables = variables;

_maxFileSize = maxFileSize;

_filefilter = filter;

init();

}

//Initialize Component

private function init():void{

// Setup File Array Collection and FileReference

_files = new ArrayCollection();

_fileref = new FileReferenceList;

_file = new FileReference;

// Set Up Total Byes Var

_totalbytes = 0;

// Add Event Listeners to UI

_browsebutton.addEventListener(MouseEvent.CLICK, browseFiles);

_uploadbutton.addEventListener(MouseEvent.CLICK,uploadFiles);

_remallbutton.addEventListener(MouseEvent.CLICK,clearFileCue);

_remselbutton.addEventListener(MouseEvent.CLICK,removeSelectedFileFromCue);

_fileref.addEventListener(Event.SELECT, selectHandler);

_files.addEventListener(CollectionEvent.COLLECTION_CHANGE,popDataGrid);

// Set Up Progress Bar UI

_progressbar.mode = "manual";

_progressbar.label = "";

// Set Up UI Buttons;

_uploadbutton.enabled = false;

_remselbutton.enabled = false;

_remallbutton.enabled = false;

// Set Up DataGrid UI

_nameColumn = new DataGridColumn;

_typeColumn = new DataGridColumn;

_sizeColumn = new DataGridColumn;

_nameColumn.dataField = "name";

_nameColumn.headerText= "File";

_typeColumn.dataField = "type";

_typeColumn.headerText = "File Type";

_typeColumn.width = 80;

_sizeColumn.dataField = "size";

_sizeColumn.headerText = "File Size";

_sizeColumn.labelFunction = bytesToKilobytes as Function;

_sizeColumn.width = 150;

_columns = new Array(_nameColumn,_typeColumn,_sizeColumn);

_datagrid.columns = _columns

_datagrid.sortableColumns = false;

_datagrid.dataProvider = _files;

_datagrid.dragEnabled = true;

_datagrid.dragMoveEnabled = true;

_datagrid.dropEnabled = true;

// Set Up URLRequest

_uploadURL = new URLRequest;

_uploadURL.url = _url;

_uploadURL.method = "GET"; // this can also be set to "POST" depending on your needs

_uploadURL.data = _variables;

_uploadURL.contentType = "multipart/form-data";

}

/********************************************************

* PRIVATE METHODS *

********************************************************/

//Browse for files

private function browseFiles(event:Event):void{

_fileref.browse(_filefilter);

}

//Upload File Cue

private function uploadFiles(event:Event):void{

if (_files.length > 0){

_file = FileReference(_files.getItemAt(0));

_file.addEventListener(Event.OPEN, openHandler);

_file.addEventListener(ProgressEvent.PROGRESS, progressHandler);

_file.addEventListener(Event.COMPLETE, completeHandler);

_file.addEventListener(SecurityErrorEvent.SECURITY_ERROR,securityErrorHandler);

_file.addEventListener(HTTPStatusEvent.HTTP_STATUS,httpStatusHandler);

_file.addEventListener(IOErrorEvent.IO_ERROR,ioErrorHandler);

_file.upload(_uploadURL);

setupCancelButton(true);

}

//Remove Selected File From Cue

private function removeSelectedFileFromCue(event:Event):void{

if (_datagrid.selectedIndex >= 0){

_files.removeItemAt( _datagrid.selectedIndex);

}

//Remove all files from the upload cue;

private function clearFileCue(event:Event):void{

_files.removeAll();

}

// Cancel Current File Upload

private function cancelFileIO(event:Event):void{

_file.cancel();

setupCancelButton(false);

checkCue();

}

//label function for the datagird File Size Column

private function bytesToKilobytes(data:Object,blank:Object):String {

var kilobytes:String;

kilobytes = String(Math.round(data.size/ 1024)) + ' kb';

return kilobytes

}

// Feed the progress bar a meaningful label

private function getByteCount():void{

var i:int;

_totalbytes = 0;

for(i=0;i

_totalbytes += _files[i].size;

}

_progressbar.label = "Total Files: "+ _files.length+ " Total Size: " + Math.round(_totalbytes/1024) + " kb"

}

// Checks the files do not exceed maxFileSize | if _maxFileSize == 0 No File Limit Set

private function checkFileSize(filesize:Number):Boolean{

var r:Boolean = false;

//if filesize greater then _maxFileSize

if (filesize > _maxFileSize){

r = false;

trace("false");

}else if (filesize

r = true;

trace("true");

}

if (_maxFileSize == 0){

r = true;

}

return r;

}

// restores progress bar back to normal

private function resetProgressBar():void{

_progressbar.label = "";

_progressbar.maximum = 0;

_progressbar.minimum = 0;

}

// reset form item elements

private function resetForm():void{

_uploadbutton.enabled = false;

_uploadbutton.addEventListener(MouseEvent.CLICK,uploadFiles);

_uploadbutton.label = "Upload";

_progressbar.maximum = 0;

_totalbytes = 0;

_progressbar.label = "";

_remselbutton.enabled = false;

_remallbutton.enabled = false;

_browsebutton.enabled = true;

}

// whenever the _files arraycollection changes this function is called to make sure the datagrid data jives

private function popDataGrid(event:CollectionEvent):void{

getByteCount();

checkCue();

}

// enable or disable upload and remove controls based on files in the cue;

private function checkCue():void{

if (_files.length > 0){

_uploadbutton.enabled = true;

_remselbutton.enabled = true;

_remallbutton.enabled = true;

}else{

resetProgressBar();

_uploadbutton.enabled = false;

}

// toggle upload button label and function to trigger file uploading or upload cancelling

private function setupCancelButton(x:Boolean):void{

if (x == true){

_uploadbutton.label = "Cancel";

_browsebutton.enabled = false;

_remselbutton.enabled = false;

_remallbutton.enabled = false;

_uploadbutton.addEventListener(MouseEvent.CLICK,cancelFileIO);

}else if (x == false){

_uploadbutton.removeEventListener(MouseEvent.CLICK,cancelFileIO);

resetForm();

}

/*********************************************************

* File IO Event Handlers *

*********************************************************/

// called after user selected files form the browse dialouge box.

private function selectHandler(event:Event):void {

var i:int;

var msg:String ="";

var dl:Array = [];

for (i=0;i

if (checkFileSize(event.currentTarget.fileList[i].size)){

_files.addItem(event.currentTarget.fileList[i]);

trace("under size " + event.currentTarget.fileList[i].size);

} else {

dl.push(event.currentTarget.fileList[i]);

trace(event.currentTarget.fileList[i].name + " too large");

}

if (dl.length > 0){

for (i=0;i

msg += String(dl[i].name + " is too large. \n");

}

mx.controls.Alert.show(msg + "Max File Size is: " + Math.round(_maxFileSize / 1024) + " kb","File Too Large",4,null).clipContent;

}

// called after the file is opened before upload

private function openHandler(event:Event):void{

trace('openHandler triggered');

_files;

}

// called during the file upload of each file being uploaded | we use this to feed the progress bar its data

private function progressHandler(event:ProgressEvent):void {

_progressbar.setProgress(event.bytesLoaded,event.bytesTotal);

_progressbar.label = "Uploading " + Math.round(event.bytesLoaded / 1024) + " kb of " + Math.round(event.bytesTotal / 1024) + " kb " + (_files.length - 1) + " files remaining";

}

// called after a file has been successully uploaded | we use this as well to check if there are any files left to upload and how to handle it

private function completeHandler(event:Event):void{

//trace('completeHanderl triggered');

_files.removeItemAt(0);

if (_files.length > 0){

_totalbytes = 0;

uploadFiles(null);

}else{

setupCancelButton(false);

_progressbar.label = "Uploads Complete";

var uploadCompleted:Event = new Event(Event.COMPLETE);

dispatchEvent(uploadCompleted);

}

// only called if there is an error detected by flash player browsing or uploading a file

private function ioErrorHandler(event:IOErrorEvent):void{

//trace('And IO Error has occured:' + event);

mx.controls.Alert.show(String(event),"ioError",0);

}

// only called if a security error detected by flash player such as a sandbox violation

private function securityErrorHandler(event:SecurityErrorEvent):void{

//trace("securityErrorHandler: " + event);

mx.controls.Alert.show(String(event),"Security Error",0);

}

// This function its not required

private function cancelHandler(event:Event):void{

// cancel button has been clicked;

trace('cancelled');

}

// after a file upload is complete or attemted the server will return an http status code, code 200 means all is good anything else is bad.

private function httpStatusHandler(event:HTTPStatusEvent):void {

// trace("httpStatusHandler: " + event);

if (event.status != 200){

mx.controls.Alert.show(String(event),"Error",0);

}

上传工具了，非常好用，大家试试吧，有什么不懂的可以来沟通，我的Q376504340.

北京网站建设www.beijingjianzhan.com首发，转载请注明，谢谢.

感谢 xxfs 的投稿

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Working with Flash Session Data in LaravelMar 12, 2025 pm 05:08 PM

Laravel simplifies handling temporary session data using its intuitive flash methods. This is perfect for displaying brief messages, alerts, or notifications within your application. Data persists only for the subsequent request by default: $request-

cURL in PHP: How to Use the PHP cURL Extension in REST APIsMar 14, 2025 am 11:42 AM

The PHP Client URL (cURL) extension is a powerful tool for developers, enabling seamless interaction with remote servers and REST APIs. By leveraging libcurl, a well-respected multi-protocol file transfer library, PHP cURL facilitates efficient execution of various network protocols, including HTTP, HTTPS, and FTP. This extension offers granular control over HTTP requests, supports multiple concurrent operations, and provides built-in security features.

Simplified HTTP Response Mocking in Laravel TestsMar 12, 2025 pm 05:09 PM

Laravel provides concise HTTP response simulation syntax, simplifying HTTP interaction testing. This approach significantly reduces code redundancy while making your test simulation more intuitive. The basic implementation provides a variety of response type shortcuts: use Illuminate\Support\Facades\Http; Http::fake([ 'google.com' => 'Hello World', 'github.com' => ['foo' => 'bar'], 'forge.laravel.com' =>

12 Best PHP Chat Scripts on CodeCanyonMar 13, 2025 pm 12:08 PM

Do you want to provide real-time, instant solutions to your customers' most pressing problems? Live chat lets you have real-time conversations with customers and resolve their problems instantly. It allows you to provide faster service to your custom

Explain the concept of late static binding in PHP.Mar 21, 2025 pm 01:33 PM

Article discusses late static binding (LSB) in PHP, introduced in PHP 5.3, allowing runtime resolution of static method calls for more flexible inheritance.Main issue: LSB vs. traditional polymorphism; LSB's practical applications and potential perfo

PHP Logging: Best Practices for PHP Log AnalysisMar 10, 2025 pm 02:32 PM

PHP logging is essential for monitoring and debugging web applications, as well as capturing critical events, errors, and runtime behavior. It provides valuable insights into system performance, helps identify issues, and supports faster troubleshoot

Discover File Downloads in Laravel with Storage::downloadMar 06, 2025 am 02:22 AM

The Storage::download method of the Laravel framework provides a concise API for safely handling file downloads while managing abstractions of file storage. Here is an example of using Storage::download() in the example controller:

How to Register and Use Laravel Service ProvidersMar 07, 2025 am 01:18 AM

Laravel's service container and service providers are fundamental to its architecture. This article explores service containers, details service provider creation, registration, and demonstrates practical usage with examples. We'll begin with an ove

See all articles