as3与php 上传多张图片demo

单张图片，可以查看上一篇文章>>

这个demo有几项没有完善：

1、对于选中重复的图片，没有做出提示（需要过滤选中的图片）

2、在一次添加的图片中如果超出最大上传数，忽略本次选中的所有图片（又得重新选一次，此现象普通存在于目前各大网站的flash批量上传中）

3、没有对选中的图片它的尺寸进行比较或限制，需要判定它的大小以及文件的类型

4、缺少对载入内存中的图片与按钮可点击状态的先后判断，应等待所有图片均可预览后再上传图片

5、缺少显示图片名称和修改图片名称

6、缺少支持删除、旋转图片的功能

特别注明：本demo需要最低flash play 10+（要支持本地预览），这个例子是用flash cs5写的，所以下载demo只能使用cs5打开了 :(

本文参考了“[原]as3 flash web 应用 （4）批量上传之 完全实现百度图片上传”，代码是自己敲的（几张按钮图片是通过SWFDecompiler反编译百度的那个上传得到的）。

这里只是写个大致demo，具体的产品中还真不能写的这么不规范：

package {
    import flash.display.DisplayObject;
    import flash.display.Loader;
    import flash.display.MovieClip;
    import flash.display.Sprite;
    import flash.errors.IOError;
    import flash.events.Event;
    import flash.events.IOErrorEvent;
    import flash.events.MouseEvent;
    import flash.events.ProgressEvent;
    import flash.geom.Matrix;
    import flash.net.FileReference;
    import flash.net.FileReferenceList;
    import flash.net.URLRequest;
    import flash.text.TextField;
    import flash.text.TextFormat;
    import flash.utils.getDefinitionByName;
    import flash.net.FileFilter;
    import flash.display.StageScaleMode;
    import flash.display.GradientType;
    import flash.events.DataEvent;

    public class MultiImageUpload extends Sprite {

        public static const UPLOAD_COMPLETE:String = "uploadComplete";
        private var AddButtonClass:Class;
        private var UploadButtonClass:Class;
        private static const CONTAINER_WIDTH:Number = 540;
        private static const CONTAINER_HEIGHT:Number = 300;
        private static const MAX_UPLOAD_NUM:Number = 18;
        private var textField:TextField;
        private var container:Sprite;
        private var uploadlist:Array = new Array();
        private var addBtn:MovieClip;
        private var uploadBtn:MovieClip;
        private var uploadURL:String = "http://meteoric.com/test/uploadFile/index.php";
        private var uploadIdx:Number = 0;

        function MultiImageUpload() {
            stage.scaleMode = StageScaleMode.NO_SCALE;

            init();
        }

        private function init():void {
            AddButtonClass = getClassByName("com.buttons.AddButton");
            UploadButtonClass = getClassByName("com.buttons.UploadButton");

            addBtn = MovieClip( new AddButtonClass() );
            uploadBtn = MovieClip( new UploadButtonClass() );

            var stageWidth:Number = stage.stageWidth;
            var stageHeight:Number = stage.stageHeight;
            var _x:Number = (stageWidth - CONTAINER_WIDTH) / 2;
            var _y:Number = (stageHeight - CONTAINER_HEIGHT) / 2;

            addBtn.stop();
            addBtn.x =_x;
            addBtn.y = _y - addBtn.height - 5;
            setButtonEnable(addBtn, true);
            addChild(addBtn);
            bindHoverEvent(addBtn);
            addBtn.addEventListener(MouseEvent.MOUSE_DOWN, selectFilesHandler);

            uploadBtn.stop();
            uploadBtn.x = _x;
            uploadBtn.y = _y + CONTAINER_HEIGHT + 10;
            setButtonEnable(uploadBtn, false);
            addChild(uploadBtn);
            bindHoverEvent(uploadBtn);
            uploadBtn.addEventListener(MouseEvent.MOUSE_DOWN, onUploadHandler);

            container = new Sprite();
            container.x = _x;
            container.y = _y;

            //draw rect container
            container.graphics.clear();
            container.graphics.lineStyle(1, 0xb4b4b4);

            var matrix:Matrix = new Matrix();//矩阵
            matrix.createGradientBox(CONTAINER_WIDTH, CONTAINER_HEIGHT, 2 * Math.PI / 5);
            container.graphics.beginGradientFill(GradientType.LINEAR, [15198183, 16777215], [0.8, 0], [0, 250], matrix);

            container.graphics.drawRect(0, 0, CONTAINER_WIDTH, CONTAINER_HEIGHT);
            container.graphics.endFill();

            addChild(container);

            textField = new TextField();
            textField.background = true;
            textField.backgroundColor = 0xffffff;
            textField.width = 400;
            textField.height = addBtn.height;
            setTextMsg("请先添加图片后再进行上传");
            textField.mouseEnabled = false;
            textField.selectable = false;
            textField.y = addBtn.y;
            textField.x = stageWidth - textField.width - addBtn.x;

            addChild(textField);
        }

        private function setTextMsg(msg:String):void {
            textField.text = msg;

            var textFormat:TextFormat = new TextFormat();
            textFormat.bold = false;
            textFormat.size = 14;
            textFormat.color = 0xd96666;
            textFormat.align = "right";

            textField.setTextFormat(textFormat);
        }

        /**
         * 设置按钮手形状态
         * @param mc {MovieClip} 影响剪辑
         * @param flag {Boolean} 设定指定的mc是否为手形
         */
        private function setButtonEnable(mc:MovieClip, flag:Boolean):void {
            mc.mouseChildren = false;

            mc.mouseEnabled = flag;
            mc.buttonMode = flag;
            mc.useHandCursor = flag;

            if (!flag) {
                mc.gotoAndStop(4);
            } else {
                mc.gotoAndStop(1);
            }
        }

        private function bindHoverEvent(mc:MovieClip):void {

            mc.addEventListener(MouseEvent.MOUSE_OVER, function() {
                if (mc.mouseEnabled) {
                    mc.gotoAndStop(2);
                }
            }, false, 0, true);

            mc.addEventListener(MouseEvent.MOUSE_OUT, function() {
                if (mc.mouseEnabled) {
                    mc.gotoAndStop(1);
                }
            }, false, 0, true);
        }

        private function getClassByName(name:String):Class {
            var mc:Class = getDefinitionByName(name) as Class;

            return mc;
        }

        private function selectFilesHandler(evt:MouseEvent):void {
            var fileRefList:CustomFileReferenceList = new CustomFileReferenceList();

            fileRefList.browse(getFilterTypes());

            fileRefList.addEventListener(CustomFileReferenceList.SELECT_COMPLETE, selectHandler);
        }

        //设定选择的文件类型
        private function getImagesFilter():FileFilter {
            return new FileFilter("images(*.jpg, *.gif, *.png, *.jpg)", "*.jpg;*.jpeg;*.gif;*.png");
        }

        //获取选择文件的类型
        private function getFilterTypes():Array {
            return [getImagesFilter()];
        }

        //选择完成文件
        private function selectHandler(evt:Event):void {
            var fileRefList:CustomFileReferenceList = evt.target as CustomFileReferenceList;

            fileRefList.removeEventListener(CustomFileReferenceList.SELECT_COMPLETE, selectHandler);

            var fileList:Array = fileRefList.getSelectedFiles();
            var len:Number = uploadlist.length + fileList.length;

            if (len <= 0) {
                setTextMsg("本次操作尚未选择任何图片");
                return ;
            } else if (len > MAX_UPLOAD_NUM) {
                var msg:String = "您选择的图片过多(" + len + ")，允许最多一次上传" + MAX_UPLOAD_NUM + "张";
                setTextMsg(msg);
                return ;
            } else {
                setTextMsg("刚刚的操作，您选择了" + len + "张图片");

                for (var i:uint = 0; i < fileList.length; i++) {
                    var fileRef:FileReference = fileList[i] as FileReference;
                    loadImage(fileRef, uploadlist.length + i);
                    fileRef.load();
                }

            }

            uploadlist = uploadlist.concat(fileList);

            if (uploadlist.length >= MAX_UPLOAD_NUM) {
                setButtonEnable(addBtn, false);
            }

            if (uploadlist.length) {
                setButtonEnable(uploadBtn, true);
            }
        }

        private function loadImage(fileRef:FileReference, idx:Number):void {

            setTextMsg("正在载入图片：" + fileRef.name);

            fileRef.addEventListener(Event.COMPLETE, function() {
                setTextMsg("图片：" + fileRef.name + "已经载入内存，等待显示");

                var loader:Loader = new Loader();
                resizeImage(loader, idx, fileRef);
                loader.loadBytes(fileRef.data);

                fileRef.removeEventListener(Event.COMPLETE, arguments.callee);
            });
        }

        private function resizeImage(loader:Loader, idx:Number, fileRef:FileReference):void {

            loader.contentLoaderInfo.addEventListener(Event.COMPLETE, function() {
                var _cSize:uint = 90;
                var _size:uint = 80;

                var w:Number = loader.width;
                var h:Number = loader.height;
                var scalePercent:Number = w/h;
                if ( w > h ) {
                    loader.width =_size;
                    loader.height = _size/scalePercent;
                } else if ( h > w ) {
                    loader.height = _size;
                    loader.width = _size*scalePercent;
                } else {
                    loader.height = loader.width = _size;
                }

                //var childs:Number = container.numChildren;

                loader.x = (idx % 6) * _cSize + (_cSize-loader.width) / 2;
                loader.y = Math.floor(idx / 6) * _cSize + (_cSize-loader.height) / 2 + (CONTAINER_HEIGHT % _cSize ) / 2;

                container.addChild(loader);

                setTextMsg("图片：" + fileRef.name + "装载成功" );

                loader.contentLoaderInfo.removeEventListener(Event.COMPLETE, arguments.callee);

            });
        }

        //点击开始上传...
        private function onUploadHandler(evt:MouseEvent):void {
            setButtonEnable(addBtn, false);
            setButtonEnable(uploadBtn, false);

            uploadIdx = 0;
            uploadImageHandler();
        }

        private function uploadImageHandler():void {
            if (uploadIdx >= uploadlist.length) {
                setTextMsg("图片已全部上传完成");
                return ;
            }

            var req:URLRequest = new URLRequest(uploadURL);
            var fileRef:FileReference = uploadlist[uploadIdx] as FileReference;
            fileRef.addEventListener(DataEvent.UPLOAD_COMPLETE_DATA, uploadImageCompleteHandler);
            fileRef.addEventListener(ProgressEvent.PROGRESS, onProgressHandler);
            fileRef.addEventListener(IOErrorEvent.IO_ERROR, ioErrorHandler);

            setTextMsg("开始上传：" + fileRef.name + "...");

            fileRef.upload(req);
        }

        private function uploadNextImage():void {
            uploadIdx++;
            uploadImageHandler();
        }

        private function uploadImageCompleteHandler(evt:DataEvent):void {
            setTextMsg((uploadlist[uploadIdx] as FileReference).name + "上传成功返回数据：" + evt.data);
            trace((uploadlist[uploadIdx] as FileReference).name + "上传成功返回数据：" + evt.data);

            uploadNextImage();
        }

        private function onProgressHandler(evt:ProgressEvent):void {
            var rate:Number = (evt.bytesLoaded / evt.bytesTotal)*100;

            setTextMsg((uploadlist[uploadIdx] as FileReference).name + "已上传" + rate + "%");

            uploadNextImage();
        }

        private function ioErrorHandler(evt:IOErrorEvent):void {
            setTextMsg((uploadlist[uploadIdx] as FileReference).name + "上传出错：" + evt);

            uploadNextImage();
        }

    }
}

php代码就不帖了，与上一篇文章的代码一样，Demo的下载地址>>

后台php的说明：使用的是nginx作为web服务器，meteoric.com为自行搭建的一个本地php测试域名。