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

首页

后端开发

php教程

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 的投稿

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

热工具

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

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题