FLASH檔案上傳和傳統的HTML檔案上傳,能實作多檔案上傳、大檔案上傳,和上傳前預覽。
當然HTML5也能實作上述功能,這裡就不多說了,有時間我在做一個執行個體和大家分享一下。
要求
-
必備知識
本文要求基本了解 Adobe Flex程式設計知識和JAVA基礎知識。 -
開發環境
MyEclipse10/Flash Builder4.6/Flash Player11及以上 -
示範位址
示範位址 資料下載下傳
下面介紹一下 百度圖檔 基于FLASH檔案上傳工具截圖:
MultiFile Upload 上傳插件介紹:
官方DEMO:
下面是對MultiFile Upload 插件的UI自定義和代碼的翻譯:
界面:
自定義UI元件: FlashFileUpload.mxml
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"
backgroundColor="#333333" horizontalCenter="0" verticalCenter="0"
creationComplete="initApp()">
<fx:Declarations>
</fx:Declarations>
<fx:Script>
<![CDATA[
import com.newmediateam.fileIO.MultiFileUpload;
import flash.media.Sound;
import flash.media.SoundChannel;
import flash.net.FileFilter;
import flash.net.URLVariables;
import mx.controls.Alert;
import mx.core.SoundAsset;
public var multiFileUpload:MultiFileUpload;
// 傳送完成音樂
[Embed(source="assets/audio/Ding.mp3")]
public var soundClass:Class;
public var snd:SoundAsset = new soundClass() as SoundAsset;
public var sndChannel:SoundChannel;
// 設定檔案過濾器
public var imageTypes:FileFilter = new FileFilter("Images (*.jpg; *.jpeg; *.gif; *.png)" ,"*.jpg; *.jpeg; *.gif; *.png");
public var videoTypes:FileFilter = new FileFilter("Flash Video Files (*.flv)","*.flv");
public var documentTypes:FileFilter = new FileFilter("Documents (*.pdf), (*.doc), (*.rtf), (*.txt)",("*.pdf; *.doc; *.rtf, *.txt"));
// 将檔案過濾器裝載如數組 遞給MultiFileUpload
public var filesToFilter:Array = new Array(imageTypes,videoTypes,documentTypes);
public var uploadDestination:String = "http://www.li-cheng.cn"; // 修改服務端上傳控制器
public function initApp():void{
var postVariables:URLVariables = new URLVariables;
postVariables.projectID = 55;
postVariables.test ="Hello World";
multiFileUpload = new MultiFileUpload(
filesDG,
browseBTN,
clearButton,
delButton,
upload_btn,
progressbar,
uploadDestination,
postVariables,
11534336,
filesToFilter
);
multiFileUpload.addEventListener(Event.COMPLETE,uploadsfinished); //事件有配置設定
}
public function uploadsfinished(event:Event):void{
sndChannel=snd.play(); //播放音頻檔案
}
]]>
</fx:Script>
<s:Group horizontalCenter="0" top="100" width="708" height="408" >
<s:BitmapImage source="@Embed('/assets/images/RasterizedItems.png')" /> <!--背景圖檔-->
<s:SkinnableContainer horizontalCenter="0" verticalCenter="0" width="638" height="308" skinClass="skins.SkinnableContainer">
<s:layout>
<s:VerticalLayout paddingLeft="15" paddingRight="23" paddingTop="15" paddingBottom="23" />
</s:layout>
<!--資料清單-->
<s:DataGrid id="filesDG" requestedRowCount="4" rowHeight="40" width="100%" height="200" skinClass="skins.DG" >
<!-- <s:columns>
<s:ArrayList>
<s:GridColumn dataField="a" headerText="#" headerRenderer="components.GridHeaderRenderer" itemRenderer="components.GridItemRenderer"></s:GridColumn>
<s:GridColumn dataField="b" headerText="歌曲" headerRenderer="components.GridHeaderRenderer" itemRenderer="components.GridItemRenderer"></s:GridColumn>
</s:ArrayList>
</s:columns>-->
</s:DataGrid>
<s:HGroup width="65%">
<!--進度條-->
<mx:ProgressBar
id="progressbar"
width="100%"
labelPlacement="right"
barSkin="skins.ProgressBar.CustomProgressSkin"
trackSkin="skins.ProgressBar.CustomProgressBarTrackSkin"
color="0xFFFFFF"
minimum="0"
visible="true"
maximum="100"
label="CurrentProgress 0%"
direction="right"
mode="manual"
/>
</s:HGroup>
<!--按鈕們-->
<s:HGroup gap="10" paddingTop="10">
<s:Button id="browseBTN" skinClass="skins.buttonSkin4" label="浏覽" fontFamily="微軟雅黑"/>
<s:Button id="upload_btn" skinClass="skins.buttonSkin5" label="上傳" fontFamily="微軟雅黑"/>
<s:Button id="delButton" skinClass="skins.buttonSkin6" label="移除" fontFamily="微軟雅黑"/>
<s:Button id="clearButton" skinClass="skins.buttonSkin6" label="移除全部" fontFamily="微軟雅黑"/>
</s:HGroup>
</s:SkinnableContainer>
</s:Group>
</s:Application>
主程式代碼: MultiFileUpload.as
// 例子:
// multiFileUpload = new MultiFileUpload(
// filesDG, DataGrid元件
// browseBTN, 浏覽按鈕
// clearButton, 清楚全部
// delButton, 清楚選中
// upload_btn, 上傳按鈕
// progressbar, 進度條
// "http://[Your Server Here]/MultiFileUpload/upload.cfm", 上傳位址 控制器
// postVariables, 上傳參數
// 350000, 最大檔案大小 0 (零)值=沒有檔案限制
// filesToFilter 檔案過濾數組
// );
package com.newmediateam.fileIO {
//倒入包
import components.GridHeaderRenderer;
import components.GridItemRenderer;
import flash.events.*;
import flash.net.FileFilter;
import flash.net.FileReference;
import flash.net.FileReferenceList;
import flash.net.URLRequest;
import flash.net.URLVariables;
import mx.collections.ArrayCollection;
import mx.collections.ArrayList;
import mx.controls.Alert;
import mx.controls.ProgressBar;
import mx.controls.ProgressBarMode;
import mx.core.ClassFactory;
import mx.events.CollectionEvent;
import spark.components.Button;
import spark.components.DataGrid;
import spark.components.gridClasses.GridColumn;
public class MultiFileUpload {
//UI 變量
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 列
private var _nameColumn:GridColumn;
private var _typeColumn:GridColumn;
private var _sizeColumn:GridColumn;
private var _creationDate:GridColumn;
private var _modificationDate:GridColumn;
private var _progressColumn:GridColumn;
private var _columns:ArrayList;
// 檔案參考變量
[Bindable]
private var _files:ArrayCollection;
private var _fileref:FileReferenceList //FileReferenceList 類提供了讓使用者選擇一個或多個要上載的檔案的方法。
private var _file:FileReference; //FileReference 類提供了在使用者計算機和伺服器之間上載和下載下傳檔案的方法
private var _uploadURL:URLRequest;
private var _totalbytes:Number;
// 檔案過濾數組
private var _filefilter:Array;
//配置變量
private var _url:String; // 檔案上傳URL
private var _maxFileSize:Number; //允許上次的最大檔案大小 機關位元組
private var _variables:URLVariables; // 上傳變量 類似 ?a=hello&b=world
//構造器
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(); //調用初始化話函數
}
//初始化函數
private function init():void{
// 設定檔案 ArrayCollection 和 檔案處理變量
_files = new ArrayCollection();
_fileref = new FileReferenceList;
_file = new FileReference;
// 設定總位元組數
_totalbytes = 0;
// 給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); //集合資料變化是監聽此函數
// 設定進度條參數
_progressbar.mode = "manual"; // 指定用于更新進度欄的方法。
_progressbar.label = "";
//設定按鈕元件
_uploadbutton.enabled = false;
_remselbutton.enabled = false;
_remallbutton.enabled = false;
// 設定 DataGrid 控件
_nameColumn = new GridColumn;
_typeColumn = new GridColumn;
_sizeColumn = new GridColumn;
_nameColumn.dataField = "name";
_nameColumn.headerText= "檔案";
_nameColumn.headerRenderer=new ClassFactory(GridHeaderRenderer);
_typeColumn.dataField = "type";
_typeColumn.headerText = "類型";
_typeColumn.width = 80;
_typeColumn.headerRenderer=new ClassFactory(GridHeaderRenderer);
_sizeColumn.dataField = "size";
_sizeColumn.headerText = "檔案大小";
_sizeColumn.labelFunction = bytesToKilobytes as Function; //Label處理函數
_sizeColumn.width = 150;
_sizeColumn.headerRenderer=new ClassFactory(GridHeaderRenderer);
_columns = new ArrayList([_nameColumn,_typeColumn,_sizeColumn]);
_datagrid.columns=_columns;
_datagrid.sortableColumns = false; //排序
_datagrid.dataProvider = _files; //資料綁定
// 設定URL請求對象和位址
_uploadURL = new URLRequest;
_uploadURL.url = _url;
_uploadURL.method = "POST"; //設定請求方式 可以為POST和GET ..
_uploadURL.data = _variables; //變量
_uploadURL.contentType = "multipart/form-data"; //請求類型聲明 如果要上傳二進制資料這個必須
}
/********************************************************
* 私有方法 *
********************************************************/
// 流量檔案 多檔案流量
private function browseFiles(event:Event):void{
_fileref.browse(_filefilter);
}
// 上傳檔案
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);//當對 FileReference.upload() 或 FileReference.download() 方法的調用嘗試将檔案上載到調用方安全沙箱外部的伺服器,或是從調用方安全沙箱外部的伺服器上下載下傳檔案時進行排程。
_file.addEventListener(HTTPStatusEvent.HTTP_STATUS,httpStatusHandler);//當上載失敗并且存在可用來描述失敗的 HTTP 狀态代碼時排程。
_file.addEventListener(IOErrorEvent.IO_ERROR,ioErrorHandler);//當上載或下載下傳失敗時排程。
_file.upload(_uploadURL);
setupCancelButton(true);
}
}
// 删除標明的檔案
private function removeSelectedFileFromCue(event:Event):void{
if (_datagrid.selectedIndex >= 0){
_files.removeItemAt( _datagrid.selectedIndex);
}
}
// 删除全部檔案
private function clearFileCue(event:Event):void{
_nameColumn.itemRenderer=null;
_typeColumn.itemRenderer=null;
_sizeColumn.itemRenderer=null;
_files.removeAll();
}
// 取消目前檔案上傳
private function cancelFileIO(event:Event):void{
_file.cancel();
setupCancelButton(false);
checkCue();
}
//檔案類型列 label處理函數
private function bytesToKilobytes(data:Object,blank:Object):String {
var kilobytes:String;
kilobytes = String(Math.round(data.size/ 1024)) + ' kb';
return kilobytes
}
// 設定進度條Labe值
private function getByteCount():void{
var i:int;
_totalbytes = 0;
for(i=0;i < _files.length;i++){
_totalbytes += _files[i].size;
}
_progressbar.label = "檔案: "+ _files.length+ "大小: " + Math.round(_totalbytes/1024) + " kb"
}
//檢查檔案不超過maxFileSize為|如果_maxFileSize == 0沒有檔案限制設定
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 <= _maxFileSize){
r = true;
trace("true");
}
if (_maxFileSize == 0){
r = true;
}
return r;
}
// 重新設定進度條
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 = "上傳";
_progressbar.maximum = 0;
_totalbytes = 0;
_progressbar.label = "";
_remselbutton.enabled = false;
_remallbutton.enabled = false;
_browsebutton.enabled = true;
}
//每當_FILES的ArrayCollection改變這個函數被調用,以確定資料網格的資料的一緻
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 = "取消";
_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 < event.currentTarget.fileList.length; 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");
}
_nameColumn.itemRenderer=new ClassFactory(GridItemRenderer);
_typeColumn.itemRenderer=new ClassFactory(GridItemRenderer);
_sizeColumn.itemRenderer=new ClassFactory(GridItemRenderer);
_sizeColumn.labelFunction = bytesToKilobytes as Function; //Label處理函數
}
if (dl.length > 0){
for (i=0;i<dl.length;i++){
msg += String(dl[i].name + " 檔案過大. \n");
}
mx.controls.Alert.show(msg + "檔案最大為: " + Math.round(_maxFileSize / 1024) + " kb","檔案過大",4,null).clipContent;
}
}
// 檔案被打開 上傳之前的響應函數
private function openHandler(event:Event):void{
trace('openHandler triggered');
_files;
}
//檔案上傳被上傳的每個檔案的過程中調用|我們用這個來養活進度條的資料
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) + "剩餘";
}
//所謂的後一個檔案已被successully上傳|我們利用這一點來檢查是否有任何檔案留下來上傳和如何處理它
//上傳完成
private function completeHandler(event:Event):void{
_files.removeItemAt(0); //移除集合中的第0号元素
if (_files.length > 0){
_totalbytes = 0;
uploadFiles(null);
}else{
setupCancelButton(false);
_progressbar.label = "上傳完成";
var uploadCompleted:Event = new Event(Event.COMPLETE); //完成時建立一個事件
dispatchEvent(uploadCompleted); //把事件配置設定出去
}
}
private function ioErrorHandler(event:IOErrorEvent):void{
//trace('And IO Error has occured:' + event);
mx.controls.Alert.show(String(event),"ioError",0);
}
private function securityErrorHandler(event:SecurityErrorEvent):void{
mx.controls.Alert.show(String(event),"Security Error",0);
}
private function cancelHandler(event:Event):void{
trace('cancelled');
}
private function httpStatusHandler(event:HTTPStatusEvent):void {
if (event.status != 200){
mx.controls.Alert.show(String(event),"Error",0);
}
}
}
}
示範位址: http://www.li-cheng.cn/demo/FlashFileUpload/FlashFileUpload.html
資料下載下傳: http://pan.baidu.com/share/link?shareid=1217875474&uk=1545675865
作者:Li-Cheng
出處:http://www.cnblogs.com/Li-Cheng/p/3585668.html
本文版權歸作者和部落格園共有,歡迎轉載,但未經作者同意必須保留此段聲明,且在文章頁面明顯位置給出原文連接配接,否則保留追究法律責任的權利。