Flash图片批量本地预览与上传实例

作者:袖梨 2022-06-28

一直以来都梦想着做一个flash的东西出来,一直都没敢去尝试。

以前一段时间由于项目的需要,曾经对百度ueditor里的flash图片上传非常痴迷。

现在的情况可能很少遇到要使用flash的机会,但这依然打消不了我追求flash的热情。

这次这个效果一切以简单为主,一是因为没什么时间,而是as3技术水平决定了。

这次主要实现了以下几个功能:

1、本地批量预览

本地预览是flash9及as3开始提供的新功能,这也成为了它的一大特色,通过将读取的本地图片二进制话,从而实现了在flash上的图片预览效果。

另外计算每个图片块的位置也是令我头疼了好一会,每排只能排5张图片,排满了就得自动换行,这其中还包括添加按钮的排位。

flash不想html那样一个css样式表一下就批量解决了排序问题,flash中所有的元件都是绝对定位,所以这其中就得不断地取整取余。

2、自动滚动效果

flash的滚动也是其一大硬伤,当内容超过容器后就只能被遮挡。不过其还是提供了一个scrollRect属性供我们调用。

实现flash容器的滚动条拖动效果,需要监听舞台及滚动条的鼠标滚轮、上拉、下拉等事件。通过鼠标指针距离flash顶部的距离去计算滚动条及容器距离flash顶部的距离。

不过我测试了,我这个效果中还是存在一点点bug的地方,希望以后有时间改进。

3、批量上传

这次的批量上传我没有实现进度监控,以后有时间可以考虑加上。

这次为了实现form式的图片上传,需要借助一个工具类UploadPostHelper,它是帮助我们构造模拟file表单,然后将我们的图片二进制数据转换成file数据提交后台。

4、可配置服务

自定义配置是一个公共化组件的最低要求,我这次提供的配置相对较少,主要是一些非常重要的配置,以后可以稍微扩展一下。

 代码如下 复制代码

id: 'flash',//flash的name或者id
 container: 'flashContainer',//flash容器id
 flashUrl: /src/ImageUploader.swf',//flash地址
 width: 540,//flash宽度
 height: 340,//flash高度
 vars: {
 uploadUrl: /_examples/php/upload.php',//上传地址 php文件接受地址大家可自己写哦,这个很简单就不介绍了。
 fieldName: 'file',//提交时的表单名称
 selectFileCallback:"selectFileCallback",// 选择文件的回调
 exceedFileCallback:null,// 文件超出限制的最大体积时的回调
 startUploadCallback:null,// 开始上传某个文件时的回调
 uploadCompleteCallback:null,// 某个文件上传完成的回调
 uploadErrorCallback:null,// 某个文件上传失败的回调
 allCompleteCallback:"allCompleteCallback"// 全部上传完成时的回调
 }

我先发布部分源码,如果需要完整源码,请留言给我

 代码如下 复制代码

private function initMask():void
 {
 
_mask = new Sprite();
 _mask.graphics.beginFill(0x000000);
 _mask.graphics.drawRect(0,0,stage.stageWidth,stage.stageHeight);
 _mask.graphics.endFill();
 
_mask.alpha = 0.6;
 
_info = new TextField();
 _info.text = "图片正在上传中...";
 var tf:TextFormat = new TextFormat("宋体",16,0xff0000);
 _info.setTextFormat(tf);
 _info.x = (stage.stageWidth - _info.textWidth) / 2;
 _info.y = (stage.stageHeight - _info.textHeight) / 2;
 _info.autoSize = TextFieldAutoSize.CENTER;
 }
 private function initDesc():void
 {
 var desc:TextField = new TextField();
 desc.text = "copy right for 谢承雄.";
 var tf:TextFormat = new TextFormat("宋体",12,0xff0000);
 desc.setTextFormat(tf);
 desc.x = stage.stageWidth - desc.textWidth;
 desc.y = stage.stageHeight - desc.textHeight-10;
 desc.autoSize = TextFieldAutoSize.CENTER;
 addChild(desc);
 }
 private function addScrollBar():void
 {
 _scrollBar = new Sprite();
 _scrollBar.graphics.beginFill(0x000000);
 _scrollBar.graphics.drawRect(((5 * _width) + 30),2,10,30);
 _scrollBar.graphics.endFill();
 
_scrollBar.addEventListener(MouseEvent.MOUSE_DOWN,_down);
 _scrollBar.addEventListener(MouseEvent.MOUSE_UP,_up);
 }
 private function _down(e:MouseEvent):void
 {
 stage.addEventListener(MouseEvent.MOUSE_MOVE,_move);
 stage.addEventListener(MouseEvent.MOUSE_UP,_up);
 
}
 
private function _up(e:MouseEvent):void
 {
 stage.removeEventListener(MouseEvent.MOUSE_MOVE,_move);
 stage.removeEventListener(MouseEvent.MOUSE_UP,_up);
 
}
 
private function _move(event:MouseEvent):void
 {
 if (((mouseY > 0) && mouseY < _container.height - 30))
 {
 setScrollPos(mouseY);
 }
 }
 private function setScrollPos(y:Number):void
 {
 var height:Number = Math.ceil((_list.fileList.length + 1) / 5) * 105 + 5 - _container.height;
 var rect:Rectangle = _container.scrollRect;
 rect.y = height * ((y - 5) / (_container.height - 35));
 _scrollBar.y = y;
 _container.scrollRect = rect;
 }
 public function upload():void
 {
 if (_list.validList.length > 0)
 {
 _index = 0;
 addChild(_mask);
 addChild(_info);
 uploadBatch(0);
 }
 }
 private function uploadBatch(i:Number):void
 {
 if (Config.START_UPLOAD_CALLBACK && ExternalInterface.available)
 {
 ExternalInterface.call(Config.START_UPLOAD_CALLBACK, _list.validList[i]);
 }
 var jpegEncoder:JPGEncoder = new JPGEncoder(_loader.width);
 var jpegBytes:ByteArray = jpegEncoder.encode(_list.bitmapList[i]);
 
var urlRequest:URLRequest = new URLRequest();
 urlRequest.url = Config.UPLOAD_URL;
 urlRequest.method = URLRequestMethod.POST;
 
var params:Object = {};
 urlRequest.data = UploadPostHelper.getPostData(_list.validList[i].name,jpegBytes,Config.FIELD_NAME,params);
 urlRequest.requestHeaders.push(new URLRequestHeader('Cache-Control','no-cache'));
 urlRequest.requestHeaders.push(new URLRequestHeader('Content-Type','multipart/form-data; boundary=' + UploadPostHelper.getBoundary()));
 
var urlLoader:URLLoader = new URLLoader();
 urlLoader.dataFormat = URLLoaderDataFormat.BINARY;
 urlLoader.addEventListener(Event.COMPLETE,uploadComlete);
 urlLoader.load(urlRequest);
 }
 private function uploadComlete(evt:Event):void
 {
 if (Config.UPLOAD_COMPLETE_CALLBACK && ExternalInterface.available)
 {
 ExternalInterface.call(Config.UPLOAD_COMPLETE_CALLBACK, _list.validList[_index]);
 }
 _index++;
 if ((_index < _list.validList.length))
 {
 _info.text = "当前正在上传第" + (_index + 1) + "/" + _list.validList.length + "张图片...";
 uploadBatch(_index);
 }
 else
 {
 _info.text = "图片全部上传完成!";
 if (Config.ALL_COMPLETE_CALLBACK && ExternalInterface.available)
 {
 ExternalInterface.call(Config.ALL_COMPLETE_CALLBACK, _list.validList);
 }
 
}
 var tf:TextFormat = new TextFormat("宋体",16,0xff0000);
 _info.setTextFormat(tf);
 }
 private function selectFile(evt:MouseEvent):void
 {
 if (! _fileReferenceList)
 {
 _fileReferenceList = new FileReferenceList();
 _fileReferenceList.addEventListener(Event.SELECT,selectHandler);
 _fileReferenceList.addEventListener(Event.COMPLETE,selectCompleteHandler);
 }
 _fileReferenceList.browse();
 }
 private function selectHandler(evt:Event):void
 {
 ExternalInterface.call("console.dir",evt.target.fileList);
 _index = 0;
 _pendingFileList = evt.target.fileList;
 _list.fileList = _list.fileList.concat(_pendingFileList);
 addPendingFile(_pendingFileList[0]);
 }
 private function addPendingFile(file:FileReference):void
 {
 if (/(.jpeg|.jpg|.png|.gif|.bmp)$/g.test(file.type))
 {
 _list.validList.push(file);
 file.addEventListener(Event.COMPLETE,selectCompleteHandler);
 if (! _loader)
 {
 _loader = new Loader();
 }
 _loader.contentLoaderInfo.addEventListener(Event.COMPLETE,loadHandler);
 file.load();
 }
 else
 {
 addError(_list.itemList.length, "格式错误!");
 loadCompelete();
 }
 }
 
private function selectCompleteHandler(evt:Event):void
 {
 _loader.loadBytes(evt.target.data);
 }
 
private function loadHandler(evt:Event):void
 {
 addItem(_list.itemList.length);
 loadCompelete();
 }
 private function loadCompelete():void
 {
 _index++;
 if ((_index < _pendingFileList.length))
 {
 addPendingFile(_pendingFileList[_index]);
 }
 if ((_index == _pendingFileList.length))
 {
 if (Config.SELECT_FILE_CALLBACK && ExternalInterface.available)
 {
 ExternalInterface.call(Config.SELECT_FILE_CALLBACK, _list.validList);
 }
 if (_list.fileList.length >= 15)
 {
 ! stage.contains(_scrollBar) && addChild(_scrollBar);
 setScrollPos(_container.height - 30);
 }
 else
 {
 stage.contains(_scrollBar) && removeChild(_scrollBar);
 }
 }
 }
 
private function addPlusItem():void
 {
 _plusItem = new Sprite();
 var x:Number = 5;
 var y:Number = 5;
 _plusItem.graphics.drawRect(x,y,_width,_height);
 _plusItem.graphics.beginFill(0xefefef,1);
 _plusItem.graphics.lineStyle(1,0x000000,1);
 _plusItem.graphics.moveTo((x - 1),y - 1);
 _plusItem.graphics.lineTo(((x + _width) + 1),y - 1);
 _plusItem.graphics.lineTo(((x + _width) + 1),y + _height + 1);
 _plusItem.graphics.lineTo((x - 1),y + _height + 1);
 _plusItem.graphics.lineTo((x - 1),y - 1);
 _plusItem.graphics.endFill();
 _container.addChild(_plusItem);
 
var btnText:TextField = new TextField ;
 btnText.text = "添加图片";
 var tf:TextFormat = new TextFormat("宋体",16,0x000000);
 btnText.setTextFormat(tf);
 btnText.height = btnText.textHeight;
 btnText.x = x;
 btnText.y = y + (_height - btnText.height) / 2;
 btnText.autoSize = TextFieldAutoSize.CENTER;
 _plusItem.addChild(btnText);
 _plusItem.addEventListener(MouseEvent.CLICK,selectFile);
 }
 private function movePlusItem(i:Number):void
 {
 _plusItem.x = (_width + 5) * int((i % 5));
 _plusItem.y = (_height + 5) * int((i / 5));
 }

相关文章

精彩推荐